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CSS 已 经 发 展 得 非常 成功 了 ， 甚 至 像 HTML 一 样 成 功 ! 尽管 有 时 候 它 的 确 令 人 难以 掌控 。 现 
在 无 论 是 在 浏览 硕 还 是 应 用 商店 ， 甚 至 聊天 客户 端 ，CSS 都 无 处 不 在 并 且 没 有 任何 消退 的 迹象 。 
随 着 这 门 语言 的 应 用 愈加 广泛 ， 其 能 力也 在 不 断 增 强 。 

本 书 涵盖 了 近 100 个 使 用 CSS 制 作 优秀 网 站 的 守门 、 技 术 、 工 具 以 及 一 些 技巧 ， 其 中 每 个 部 
分 都 是 相对 独立 的 。 你 可 以 随便 翻 开 一 页 就 谈 ， 而 不 用 担心 会 销 过 前 面 草 节 中 的 某 些 重要 内 容 。 
本 书 假定 你 至 少 已 经 熟悉 一 点 儿 CSS 和 CSS 的 使 用 ， 这 种 假定 的 熟练 程度 可 以 描述 为 “ 进 阶 的 初 
学 者 到 中 级 的 使 用 者 "。 所 以 ， 如 果 你 一 点 儿 也 不 了 解 CSS， 或 者 知道 的 比 那 些 押 写 规范 的 人 都 
Z, ABA AIG AR WRIA EIA A, ASE AIR SE 2 EAN AAS 

在 本 书 的 第 一 部 分 , Bee ih FA TEAR ORES SST, 其 中 还 包括 一 些 不 那么 
好 理解 的 CSS 选 择 需 。 第 二 部 分 展示 了 CSS 可 以 实现 的 各 种 各 样 的 效果 ， 其 中 包括 一 些 好 玩 的 特 
效 、 对 同一 目标 的 不 同 实现 方 式 以 及 布局 等 。 第 三 部 分 介绍 的 是 前 治 技术 ,这 些 技术 或 许 你 现在 
的 项 目 里 还 用 不 到 ， 但 是 随 看 时 间 的 推移 ， 它 们 一 定 会 在 你 的 工作 中 变 得 越 来 越 重要 。 

请 访问 本 书 的 网 站 www.wiley.com/go/smashingcss 下 载 代 码 示例 "。 

大 约 十 年 以 前 ， 你 可 能 还 以 为 CSS 大 限 将 至 了 。 但 是 到 了 2010 年 ， 它 却 变 得 更 加 充满 活力 且 比 
以 往 更 加 引 人 注 目 了 。 我 希望 你 能 至 受 这 前 后 封皮 之 间 的 内 容 ， 就 如 同 我 写作 此 书 时 同样 地 享受 。 


中 也 可 在 图 灵 社 区 ( www.ituring.com.cn ) 本 书 网 页 免费 注册 下 载 。 一 一 编者 注 
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无 论 做 什么 事情 , 工具 都 能 起 到 很 大 的 辅助 作用 , 创建 网 页 或 者 应 用 亦 如 此 。 对 于 CSS 来 说 ， 

既 有 可 以 帮助 我 们 书写 CSS 的 工具 ， 也 有 使 用 CSS 构 建 的 工具 来 辅助 我 们 进行 开发 。 甚 至 有 的 工 

具 可 以 使 我 们 的 浏览 需 支 持 更 多 原生 并 不 支持 的 CSS 特 性 ， 你 不 仅 是 开发 者 ， 还 是 个 能 工 巧 折 ! 
Hired 如 的 这 些 工 具 绝对 会 撑 爆 你 的 工具 箱 。 


1.1 Firebug 


ae ( 见 图 1-1 ) 是 任何 网 页 开发 人 员 a pa (关于 另外 一 
个 ， 请 参考 1.2 节 )。 它 是 火狐 浏览 吉 (Firefox) 中 一 个 完全 免费 的 扩展 ， 如 果 用 的 是 其 他 浏览 
由 可 以 接着 往 下 看 ， 因 为 你 一样 可 以 使 用 Pincbuel 


e : 9 Firebug P > 
OP OO OO exam AERE T * 


What is Firebug? Resources Community Get Involved 
n and Features one wiki, FAQ, and Discussion forums and lists Hack the code, create plugins 
o irebug lore 


W2 Firebug Install Firebug 1.5.2 
100% free and open source 
Web Development Evolved. Other Versions Firebug Lite Extensions 


The most popular web development tool for Firefox | Introduction to Firebug 
+ Chief Firebug pyroentomologist 


e Inspect HTML and modify style and layout in real-time * E Rob Campbell gives a quick 

人 Use the most advanced JavaScript debugger available for any browser LT Mà veo Firebug. 

@ Accurately analyze network usage and performance mu 

4? Extend Firebug and add features to make Firebug even more powerful Other Firebug screencasts 

4? Get the information you need to get it done with Firebug. 2 ES 
More Features » 


Q Inspect il Los o Profile 
Pinpoint an element in a webpage Send messages to the console Measure your Javascript 
with ease and precision. direct from your webpage through performance in the Console's 
Javascript. Profiler. 


QU Debug I| Analyze {* Layout 
Step-by-step interactive debugging Look at detailed measurements of Tweak and position HTML elements 


in a visual environment. your site's network activity. with CSS and the Layout panels. 


Recent news Links and Elsewhere 


1-1 Firebug W 
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要 想 安 装 Firebug, 可 以 在 火狐 浏览 大 中 访问 getfirebug.com, 然后 单 击 Install ( 安装 ) 按钮 C5 
作 本 书 时 ， 这 个 按钮 就 在 网 页 的 右上 方 ) 开始 安装 ， 安装 完 成 后 重启 火狐 浏览 妖 即 可 。 现 在 准备 
开始 你 的 神奇 之 旅 吧 ! 

我 没 法 在 这 么 短 的 篇 幅 中 讲解 Firebug 的 全 部 功能 .实际 上 ,即使 整整 一 草 的 篇 幅 都 未 必 够 用 ， 
我 这 里 只 讲 一 些 重点 。 

图 1-2 中 所 示 的 HIML 选 项 卡 左 侧 展 示 的 是 文档 结构 ， 单 击 盘 头 可 以 展开 或 收缩 文档 的 子 结 
构 。 注 意 在 该 选项 卡 中 ， 当 把 鼠标 悬 停 在 某 个 元 素 名 上 时 ， 该 元 素 会 在 页 面 中 突出 显示 。 最 神奇 
的 是 , 它 还 可 以 显示 彩色 区 域 并 利用 不 同色 彩 展示 元 系 的 内 边 距 (padding ) 和 外 边 距 ( margin )。 
例如 ， 本 例 中 的 内 容 区 域 为 浅 蓝 色 ， 内 边 距 是 淡 紫 色 ， 外 边 距 是 浅黄 色 。 具 体 是 什么 颜色 其 实 不 
重要 ， 关 键 是 在 页 面 上 可 以 很 百 观 地 看 到 效果 。 
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The most popular web development tool for Firefox 

e Inspect HTML and modify style and layout in real-time 

@ Use the most advanced JavaScript debugger available for any browser 

€ Accurately analyze network usage and performance 

«f Extend Firebug and add features to make Firebug even more powerful Other Firebug screencasts 

4? Get the information you need to get it done with Firebug. o Todi heck rmone Firabug sereencas PA coming 
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[4| | #10go-install master.css (line 102) |4 
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t 
margin-bottom: 15px; 


padding-top: 90px; J 
} ! 
html d 1l object, iframe, reset.css (line 6) 


tml, body, div, span, applet, obj 
™ | hi, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
ym ig, cite, code, del, 


«h2»Web Development Evolved. «/h2» 
</div> 


图 1-2 ”通过 Firebug 查 看 元 素 的 布局 (为 见 彩 插图 1-2 ) 


在 HTML 选 项 卡 的 右 侧 , 可 以 通过 单 击 Style( 样式 ) 选 项 卡 查看 应 用 在 当前 元 素 上 的 CSS ( 见 
图 1-3 )。 这 里 不 仅 包 含 你 自己 写 的 样式 ， 还 包含 浏览 融 自 身 的 内 建 样式 。 例 如 ， 你 可 以 看 一 下 
html.css 和 quirk.css 这 两 个 文件 的 内 容 ， 这 些 就 是 内 建 样式 (这些 样 式 称 为 “用 户 代 理 样式 ”， 可 
以 通过 点 击 Style 选 项 卡 ， 在 弹出 的 沫 单 中 选择 是 否 显 示 用 户 代理 样式 )。 

有 一 点 需要 注意 ，Firebug 有 时 候 会 显示 一 些 像 -moz-background-clip 这 种 未 曾 声明 过 的 属性 ， 
如 果 确 定 没 有 明确 声明 那些 属性 ,基本 就 可 以 将 其 忽略 挥 。 男 外 ， 如 果 你 使 用 的 是 人 简写 形式 的 属 
性 ， 它 也 会 自动 扩展 成 独立 的 属性 ， 也 就 是 说 像 这 样 的 代码 : 
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font: lem "Andale Mono", "Courier New", Courier, monospace; 


Cy Console | HTML» | CSS Script DOM Net Cookies Firefinder  YSlow \ LAA 
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Stylev Computed ee DOM 


4 | #thoughts m s (line 13) 全 
border-bottom: 1px solid #999999; 
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ae + » Qs 
m »J)J-CO UI 
\ 
isable * Cookies * CSS ~ Form 
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< div.entry - div#main < body#www...-com.hpg 


divéthoughts 


V <html> 
> «head profile="http://gmpg.org/xfn/1"> 
«body id-"www-meyerweb-com" class-"hpg"» 
> <div id-"si 


meyerweb.com 
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padding: uy T 


h3 { meyerweb.css (line 14) 


margin: 2em 0 0.25em; 


CSS Toolbox ti 


Archives 


* ( meyerweb.css (line 5) 
> 9 
One of the things you discover as a speaker and, mergini—0; 
— especially, a conference organizer is this: 一 
Better PD > <em> } 
Seriously. Much like Miles O'Keefe, they're Inherited from div.entry 
m Feb 2010 One of the things yo «strong» huge «/strong» n *( meyerweb.css (line 5) 
Keynote generates 2 => had one speaker last year whose lovingly =n . 
rafted and beautifully designed 151-slide deck font-size: 100%; 
huge. We had one y 9 
Ma - : sulted in a 175MB PDF. } 
Speaking deck resulted in a 17 d Inherited from div#thoughts 
Tous Now, hard drives and : pe * [I meyerweb.css (line 5) 
: ia VERE z 
all trying to download) A font-size: 100%; 
Four res ponses ill d to find clas alt- —9 / /meyerweb. com } 
will drop by to pix d vean rtzfilter png"> ERE pee z 
down the entire out > <p> —HPÁÁÓ— 
Whatever you person > <p> wet meyerweb.css (line 5) 
access is roughly akir > <p> font-size: 100%; 
> <ol> } 
So what's the - «p» Done. The next p gee eed 5 bcp e the Inherited from body#www-meyerweb-com. hpg 
Leopard. If the slides of a UM, it up i “Save As” , lady d meyerweb.css (line 6) 
can't help you. and save it using the Ae hi “fi e r you just y 
installed. oi color: #202020; 
If the slides are imagé «p» If m ma = m type nm ap ather font: 0.84em/1.333 Arial,sans-serif; 4 
- — type e Y 
heavy, then you can i éi meyerweb.css (line 5) 
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图 1-3 ”在 独立 的 Firebug 窒 口中 Style 选 项 卡 全 部 展开 
在 Firebug 中 就 会 变 成 这 样 : 


font-family: "Andale Mono", "Courier New",Courier, monospace; 
font-size: lem; 

font-size-adjust: none; 

font-stretch: normal; 

font-style: normal; 

font-variant: normal; 

font-weight: normal; 

line-height: normal; 


尽管 刚 开始 可 能 有 点 儿 令 人 困惑 , 但 是 这 种 呈现 方式 并 不 赖 , 因为 它 可 以 提醒 你 在 这 些 简 
的 背后 还 隐藏 大 一些 东西 (更 多 的 简写 属性 见 第 2 章 。) 

男 外 需要 注意 的 是 ，Style 选 项 卡 中 列 出 的 规则 是 按 特 殊 性 ( specificity ) 降序 排列 的 ， 也 就 
是 说 ,第 一 个 是 应 用 在 当前 元 系 上 最 特殊 的 规则 ( 优先 级 最 高 )， 第 二 个 是 特殊 性 稍 低 一 点 的 规 
则 ， 依 次 类 推 。( 更 多 关于 特殊 性 的 内 容 ， 详 见 2.3 市 。) 

通过 随时 单 击 鼠 标 右键 并 在 弹出 的 沫 单 中 选择 Inspect Element ( 审查 元 素 ) 选项 可 以 查看 任 
MICR CA AT 1-ABrz ), 你 也 可 以 单 击 Firebug 图 标 劳 边 齐 箭 头 的 方 框图 标 切换 到 审查 模式 。 此 时 ， 
随 着 鼠标 在 页 面 上 的 移动 ， 当 前 元 素 会 显现 出 轮廓 ， 单 击 元 素 即 可 进行 查看 。 

在 Firebug 中 单 击 任何 声明 左 侧 的 空白 处 都 可 以 禁用 该 声明 , 这 种 禁用 声明 的 方式 对 于 测试 各 
个 属性 之 间 的 相互 作用 非常 有 用 。 在 图 1-5$ 中 还 可 以 看 到 ， 鼠 标 悬 停 在 颜色 值 上 会 出 现 一 个 小 色 
块 ， 它 用 来 展示 该 值 对 应 的 颜色 。 
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Web Developer » 

Now, id bandwidth may be cheap, but when you have four hundred plus attendees 
all trying to download the same 175MB PDF at the same time, the venue's conference manager 
will drop by to find out what the bleeding eyestalks your attendees are doing and why it's taking 
down the entire outbound pipe. Not to mention the network will grind to a nearly complete halt. 
Whatever you personally may think of net access at conferences, at this point, not providing net 
access is roughly akin to not providing functioning bathrooms. 


So what's the answer? Shrinklt is fine if the slides use lots of vectors and you're running Snow 
Leopard. If the slides use lots of bitmapped images, or you're not on Snow Leopard, Shrinklt 
can't help you. 
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It's been said before that web inspectors 一 Firebug, Dragonfly, the inspectors in Safari and 
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Get http: //meyerweb.com/eric/thoughts/2010/02/15/inspector-scrutiny/ 家 v (“By Google |^ QJ o 


Console | HTML» | CSS Script DOM Net Cookies Firefinder YSlow 


body#www...-com.hpg < html Style v | Computed Layout DOM 


k$ : Edit ; a < hl < div#sitemast < 


V <html> #sitemast hi a { 
> «head profile="http://gmpg.org/xfn/1"> @ color: #612900; 
V <body id="ww-meyerweb-com” class="hpg"> } 
V <div id="sitemast"> #sitemast hi a 加 
Y chis text-decora = = 
C ||| > 
«span» meyerweb </span> #sitemast hi a { 
.com 
</a> } 
«/h1» 
«/div» 
«div id="search"> 
«div id="main"> 
«div id="extra"> 
«div id="navigate"> 
«div id="footer"> 
</body> 


a:visited 


-一 一 一 


font-size: 100%; 
margin: @; 
padding: 0; 


图 1-5 


theme.css (line 4) 


meyerweb.css (line 54) 


meyerweb.css (line 53) 


meyerweb.css (line 10) 


meyerweb.css (line 5) 


禁用 的 样式 短 浮 的 颜色 框 ( 为 见 彩 插图 1-5 ) 


|= 
v 


aN 


6 $13 I 具 


如 图 1-6 所 示 ， 在 Firebug 的 Style 选 项 卡 中 也 可 以 查看 元 系 的 计算 样式 。 这 就 意味 着 ， 无 论 你 
是 否 曾经 声明 过 ， 它 都 会 把 所 有 已 知 的 应 用 在 该 元 素 上 的 CSS 属 性 展示 出 来 。 记 住 ， 所 有 的 CSS 
属性 都 有 默认 值 。 在 该 视图 下 可 以 查看 全 部 的 软 认 值 , 例如 当 你 想 知 道 浏 览 絮 应 用 在 标题 上 的 行 
高 (line-height ) 的 确切 像素 值 时 ， 该 视图 就 变 得 非常 有 用 了 。 


as 4. <a (^. GEA http: //meyerweb.com/eric/thoughts/2010/02/15 /inspector-scrutiny/ FAC http://meyerweb.com/eric/thoughts/2010/02/15/inspector-scrutiny/ wY a 
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It's been said before that web —ÁÓ mes the — in Safari and 
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Ex Console HTML» | CSS Scr ript DOM Net Cookies  Firefinder YSlow 
HB cx «hi < body#www...-com.hpg < html Style | Computed v 
Y <html> ^; Text 


< divésitemast Layout DOM 


> «head profile="http://gmpg.org/xfn/1"> l 
V <body id-"www-meyerweb-com" class-"hpg"» 
V <div id="sitemast"> 
Y <hi> 
Vv <a href="/"> 
«span» meyerweb </span> 


<div id="extra"> 

<div id="navigate"> 

<div id="footer"> 
</body> 


font-family 
font-size 
font-weight 
font-style 
color 
text-transform 
text-decoration 
letter-spacing 
word-spacing 
line-height 
text-align 
vertical-align 
direction 


图 1-6 计算 样式 


Arial,sans-serif 
26.8667px 
bold 
normal 
#61290D 
none 
none 
3.5px 

0 
26.8667px 
start 
baseline 

Itr 


通过 查看 元 素 的 盒 模型 (box model) 部 分 ， 可 以 精确 地 查看 元 素 的 尺寸 大 小 ， 如 元 素 的 宽 、 
高 、 内 边 距 和 外 边 距 等 ( 如 图 1-7 所 示 )， 这 些 都 是 用 像素 表示 的 。 更 酷 的 是 当 鼠 标 悬 停 在 该 面板 
中 的 框 上 时 ， 页 面 上 就 会 出 现 沿 着 元 素 外 框 的 上 边缘 和 左边 缘 放 置 的 像素 尺 。 

在 图 1-8 中 我 们 可 以 很 明显 地 看 到 ，Firebug 还 有 许多 其 他 功能 ， 诸 如 可 以 编辑 元 素 的 属性 值 
( 比如 class ) 或 者 元 素 本 身 的 内 容 、 添 加 或 编辑 CSS 属 性 和 值 等 。 通 过 在 Firebug 界 面 中 随时 单 击 
鼠标 左 键 或 者 右键 可 以 自行 探索 Firebug 的 功能 ， 看 看 你 还 能 做 点 儿 什么 ? 


1.1 Firebug 7 


OR x PC (FA http://meyerweb.com/eric/thoughts/2010/02/15/inspector-scrutiny/ wy v ) (Hy Google = QQ) 
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Toolbox Writing Speaking 


Console | HTML v | CSS Script DOM Net Cookies Firefinder YSlow 


Edit | h3 < diventry < div#thoughts < div#main < ..-com. -— | Style Computed Layoutv | DOM 
Y <html> | 

> «head profile="http://gmpg.org/xfn/1"> 

V <body id="www-meyerweb-com"” class="hpg"> mann 


L «div id="sitemast"> 
> <div id="search"> 
V <div id="main"> 
> <div class="skipper"> 
: «div class-"skipper"» 
V <div id="thoughts"> 579 x 22 
Y == class="entry"> 
== 
<a title="Permanent Link: Inspector 
Scrutiny" rel="bookmark" href="http://meyerweb.com 
/eric/thoughts/2010/02/15/inspector-scrutiny 


/">Inspector Scrutiny </a> 
</h3> 
> <ul class="meta"> 


position: static 


图 1-7 Layout (布局 ) 选项 卡 〈 另 见 彩 插图 1-7 ) 
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Mon 15 Feb 2010 It's been said before that web inspectors—Firebug, Dragonfly, the inspectors in Safari and 
0954 Chrome, and so forth—are not always entirely accurate. A less charitable characterization is that 


they lie to us, but that’s not exactly right. The real truth is that web inspectors repeat to us the lies 
they are told, which are the same lies we can be told to our faces if we ask directly. 


Here's how | know this to be so: 


Browsers 


m Dowd ci h3« diva entry < divéthoughts < div#main < body#www...-com. “Style | Computed Layout DOM 


了 <html> [a #thoughts h3 { E tfe.css (line 13)4 
> «head profile="http://gmpg.org/xfn/1"> | border-bottom: 1px solid #999999; Y 
VY <body id-"www-meyerweb-com" class-"hpg"» clear: both; 
> «div id="sitemast"> font-size: 1.6em; 
> <div id="search"> + ep 
V «div id="main"> iot apg 0. Sen: 
padding: 0 0 0.25em 6.25em; 


> <div class-"skipper"» 
> <div class="skipper"> 
V <div id-"thoughts"» 


meyerweb.css (line 14) 
Y <div class-"entry"» -— 
v 


a SEIN E A 
margin: 2em Q 0.25em; 


«a title-"Permanent Link: Inspector 


图 1-8 在 Style 选 项 卡 下 动态 编辑 CSS 
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需要 注意 ， 当 在 Style 选 项 卡 下 查看 元 素 的 CSS 时 ， 无 法 看 到 任何 伪 元 素 ( pseudo-element ) 影 
啊 元 素 的 相关 规则 。 作 为 例子 ， 如 果 我 们 使 用 了 选择 融 p:first-Lletter， 那 么 当 查 看 pb 元 系 时 
就 无 法 看 到 这 条 规则 ， 伪 类 ( pseudo-class ) 是 可 以 看 到 的 ,但 是 伪 元 素 不 能 。 这 对 于 包含 和 后 成 内 
容 的 清除 浮动 ( clearfix ) 解决 方案 ， 可 能 是 个 问题 ( 见 4.5 市 )。 

如 果 你 没有 使 用 Firefox 进 行 开 发 ， 但 却 想 一 睹 Firebug 的 风采 ， 那 么 访问 页 面 getfirebug.comy 
lite.html ( 如 图 1-9 所 示 ) 并 且 按 照 页 面 上 的 指引 进行 安装 ， 就 可 以 使 Firebug 运 行 在 Internet Explorer, 
Opera 或 者 Safari 等 浏览 器 中 ， 以 此 来 适应 你 的 开发 环境 。 你 可 以 把 Firebug 精 人 简 版 链接 到 测试 页 面 
进行 测试 , 或 者 把 它 保存 到 书签 栏 存 成 一 个 书签 小 程序 (bookmarklet ) 一 一 这 也 是 我 推荐 的 方式 。 


Firebug Lite : Firebug - Windows Internet Explorer 


a http: //getfirebug.com/firebualite b B ies X bo Bing 


il iew Favorites Tools Help 
ites 33 P Suggested Sites * [re Hotmail Æ| Web Slice Gallery + | Firebug Lite 
r r1 » 
| 32 Firebug Lite : Firebug | | tac [7] deh + Pager Safety» Toos- @~ | 


Firebug Lite Links and Elsewhere 


What is Firebug? 


P Inspect 
Console | HTML | CSS Script DOM  XHR Options v Computed Style | DOM 
< > 


bo} backgroundAttachment "scroll 


transparent” = 
url("http://getfirebug.com/img/bc 


m borderBottomStyle 
由 «div class-"group" id-"logo-install'- borderBottomWidth 
<idiv> borderCollapse 
由 «div id="articleheader"> borderColor 
| borderLeftColor 
a 


A) Error on page. e Internet 


由 «div class-"group" id="secondary"> 


To return to your computer, press Control-36 


图 1-9 Firebug 精 简 版 在 正 浏览 需 上 运行 


这 个 版 本 的 Firepug 并 不 像 火 狐 扩 展 版 的 功能 那么 多 ,因此 才 有 “精简 版 ”一 说 , 但 是 它 仍然 
很 好 很 强大 。 


1.2 Web Developer Toolbar 


K I Firebug, 另外 一 个 网 页 开发 人 员 必 不 可 少 的 工具 就 是 WDT( Web Developer Toolbar ) T, 
它 也 是 火狐 浏览 厦 的 一 个 完全 免费 的 扩展 。 

访问 chrispederick.com/work/web-developer 可 以 获得 此 扩展 ,你 也 可 以 访问 addons.mozilla.org， 
然后 搜索 “Web Developer Toolbar”， 在 WDT 的 安装 页 面 进行 安装 ( 如 图 1-10 所 示 )。 


1.2 Web Developer Toolbar 9 


e o o Web Developer :: : Add-ons for Firefox = 
| Fa CO F https: //addons. mozilla. org/en- -US/firefox/addon/6 1 vy v Cy g 00 e d j 


mozilla Register or Login ^ Other Applications ~ 


Add-ons for 名 Firefox 
search for add-ons within > 


Add-ons for Firefox 


图 Web Developer 1.1.8 


by chrispederick 


The Web Developer extension adds a menu and a toolbar with Meet the Developer 
various web developer tools. Learn why Web 


Developer was 


路 Add to Firefox created and find 


out what's next for 
this add-on. 
The developer of this add-on asks that you Meet chrispederick » 
kas A help support its continued development by 
making a small contribution. Sw WbDedune à 
Add-ons 


Suggested Donation: $9.99 
¥ Contribute What's this? See All Toolbars Add-ons » 


Other add-ons by chrispederick 
-Fn 


图 1-10 addons.mozilla.org 网 站 上 的 Web Developer Toolbar 页 面 


跟 Firebug 一 样 ， 我 也 没 法 把 WwWDT 的 所 有 功能 都 讲 一 过 ， 那 样 的 话 一 整 草 也 不 够 用 。 
挑选 了 其 中 几 个 荣 单 进行 重点 讲解 ， 当 然 ， 当 你 装 完 WDT 之 后 应 该 花 点 儿 时 间 看 看 所 有 ^ sd 
选项。 

有 了 时候 需 要 频繁 更 新 一 些小 的 改动 ， 而 浏览 右 绥 存 可 能 变 得 很 烦人 ,这 时 候 禁 用 浏览 右 缓 存 
就 很 有 用 了 。 如 图 1-11 所 示 ， a eae 它 可 以 让 你 看 到 当 全 部 脚本 都 停 
目 工 作 或 者 JavaScript 框 架 没 有 载 人 时 会 发 生 什么 。 

如 图 1-12 所 示 ，CSS 沫 单 中 的 某 些 功能 在 Firebug 中 也 有 , 但 是 WDT 有 个 非常 棒 的 功能 能 一 一 

以 只 禁用 艇 入 样式 ( embedded style )、 链 接 样 式 表 ( linked style ) 或 者 只 禁用 行内 样式 ( inline style ), 
当然 你 不 应 该 使 用 行内 样式 (inline style)! 如 果 你 想 看 到 一 个 畸形 meii 甚至 可 以 用 WDT 关 
掉 大 部 分 的 浏览 融 内 建 样式 。 

图 1-13 中 的 Information (网 页 信息 ) 菜单 中 包含 了 大 量 好 玩 的 小 报告 ， 包 括 显示 文档 中 的 类 
(class ) 和 ID 信息 、 显 示 aiv 的 顺序 、 网 页 中 的 颜色 信息 汇总 ， 你 还 可 以 启用 显示 元 素 信 息 
模式 ， 当 单 击 任何 元 素 时 都 可 以 看 到 该 元 素 各 属性 和 值 的 汇总 信息 ， 诸 如 元 素 在 页 面 中 的 位 置 、 
字体 、 元 素 的 祖先 和 后 代 元 素 ， 等 等 。Imformation 沫 单 展示 的 " 容 跟 XRAY 很 像 ， 本 和 草 后 面 会 介 
绍 更 多 关于 XRAY 的 内 容 。 
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Seas The Web Developer extension adds a menu and a toolbar with 


——— i = various web developer tools. 
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Miei iy "P Add to Firefox 
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Edit CSS 
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图 1-11 Disable (禁用 ) 菜单 
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Disable Styles All Styles 3895 


Display CSS By Media Type > Browser Default Styles 
View CSS 3880 C 


View Style Information £2 Y Embedded Styles 
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Add User Style Sheet... v Linked Style Sheets 
Edit CSS ROE 
Use Border Box Model Print Styles 


Individual Style Sheet  » 


e Other Applications 


search for add-ons within aeo — T) 


Advanced 


1. Add-ons for Firefox 


加 Web Developer 1.1.8 


by chrispederick 


The Web Developer extension adds a menu and a toolbar with various web developer tools. 


E-laaa to Firefox 


图 1-12 ”通过 CSS 菜 单 梦 用 链接 样式 表 


1.2 Web Developer Toolbar 11 


Display Abbreviations 

Display Access Keys 

Display Anchors 

Display Block Size 

Display Div Order 

Display Element Information 384*F  herapes.cnange .context 
Y Display Id & Class Details Other Applications ~ 
Display Link Details 
Display Object Information 


Display Stack Levels 
Add =O ns for Display Tab Index 

Display Table Depth 

Display Table Information 


fbrand #aux-nav 
and-alone-options Display Title Attributes 
Display Topographic Information 


M Categories 


View Anchor Information 
View Color Information 


View Document Outline > 


View Document Size TBI all add-ons + 


View JavaScript 

View Link Information 

View Meta Tag Information 
ad — View Page Information 

View Response Headers 
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通过 图 1-14 中 所 示 的 Outline ( 标示 ”) 菜单 可 以 标示 出 各 种 元 素 ， 包 括 全 部 块 (block ) 元 
zx. UTA Cinline) 元 素 、 全 部 链接 、 全 部 定位 元 素 、 全 部 表格 单元 格 等 ， 还 可 以 目 定 义 需 
要 标示 的 元 系 以 及 标示 颜色 。 当 标示 元 系 时 ， 你 也 可 以 选择 是 否 在 页 面 上 显示 元 系 的 名 字 。 这 
六 亲 单 可 比 它 看 上 去 要 强大 得 多 ， 我 把 它 当 做 一 个 Layout Diagnostic (布局 诊断 ) 3e fe HI, 
因为 我 可 以 快速 标示 出 不 同 的 元 系 集 合并 且 快 速 查 看 它们 之 间 的 闭 放 关系 , 快速 找 出 可 能 出 错 
的 地 方 。 

Tools ( 工具 ) 采 单 提供 了 一 些 验 证 磊 、 错 误 检 查 右 和 调试 控制 台 的 快捷 访问 方式 ， 而 其 中 
最 好 的 一 个 特性 就 是 可 以 验证 本 机 的 HTML 和 本 机 的 CSS ( 如 图 1-15 所 示 ， 分 别 对 应 “Validate 
Local HTML” 和 “Validate Local CSS” 项 )， 在 这 两 种 情况 下 ， 当 前 浏览 的 网 页 都 会 被 打 包 成 序 
列 化 的 字符 串 发 送 到 相关 的 验证 需 。 因 此 ， 如 采 选 择 了 Validate Local HTML， 页 面 的 标记 就 会 被 
发 送 到 HTML 了 验证 带 ， 然后 你 会 看 到 一 个 报告 。 这 对 于 验证 那些 受 防 火 墙 保护 的 页 面 和 公 网 无 法 
访问 ( 因此 验证 各 服务 也 无 法 访问 ) 的 页 面 来 说 非常 实用 , 有 了 本 机 了 验证 功能 ， 这 些 都 不 再 是 问 
题 了 。 


CD 此 处 翻译 参照 了 Web Developer Toolbar 中 文 界 面 的 菜单 项 。( 本 书 脚 注 知 无 特殊 说 明 均 为 译 者 注 。) 


Sc —€———— 
LU > E 


Developer :: Add-ons for Firefox = 
https://addons.mozilla.org/en-US/firefox/addon/6 Y ("Ms Google Q) + 


Outline Frames 
Outline Headings 
Outline Links 
Outline Tables 


v Outline Block Level Elements 
Outline Deprecated Elements 
Outline Positioned Elements 


Outline Current Element 
Outline Custom Elements... 


v Show Element Names When Outlining 


a Categories 
> 


Q, search for add-ons Miau all add-ons "| 


Add-ons for 


a eb Developer 1.1.8 


n (U. _https://addons.mozilla.org/en-US/firefox/addon/6 wy [Mis Google = QQ) 


Validate CSS 
R Validate Feed 
mozilla Validate HTML 
Validate Links 
Validate Section 508 


Add-ons for Firefox Validate WA 


View Speed Report 


Edit Tools... 


Error Console BY 
Java Console #00 


for Firefox Display Page Validation 


Add-ons 
Validate Local CSS 
Hg Pen Deeper LLE 
by chrispederick 


Sees The Web Developer extension adds a menu and a toolbar with 


Disable Styles » various web developer tools. 
Display CSS By Media Type » 
*0D 


View CSS 

Style Information #0Y 
View Style 路 Add to Firefox 
Add User Style Sheet... 


Edit CSS ROE 
Use Border Box Model 


The developer of this add-on asks that you 
es help support its continued development by 
making a small contribution. 


Suggested Donation: $9.99 
¥ Contribute What's this? 


图 1-1$ Tools% 
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正如 我 开始 所 说 的 ， 对 于 WDT 的 全 部 功能 来 说 这 些 只 是 管中窥豹， 所 以 花 点 儿 时 间 仔 细 研 m 
究 一 下 这 个 工具 吧 ， 它 会 让 你 的 生活 变 得 更 轻松 ! 


1.3 IE 开发 者 工具 栏 


如 果 你 主要 用 Internet Explorer 7 完成 开发 工作 , 那 就 不 能 安装 Web Developer Toolbar 了, 但 你 
可 以 安装 IEDT ( Internet Explorer Developer Toolbar，IE 开 发 者 工具 栏 ) 来 作为 奉 代 品 。 

IEDT 的 URL 地 址 是 那 种 非常 典型 的 谁 也 记 不 住 的 微软 URL， 所 以 打开 你 最 喜欢 的 搜索 引擎 
( 使 用 Google 会 有 那么 一 点 儿 讽刺 )， 然后 输入 “Internet Explorer Developer Toolbar”， 应 该 第 一 个 
搜索 结果 就 是 了 ,如果 是 IE7 的 话 可 以 继续 单 击 进行 安装 。 IEDT 不 文 持 IE8, 一 会 儿 我 们 再 看 看 IE8 
都 提供 了 什么 。 

完成 安装 后 ， 你 就 可 以 找到 右上 和 角 的 Tools 羔 单 ( 如 图 1-16 所 示 ， 就 在 Pages( 页 面 ) 菜单 附 
近 )， 注 意 不 是 左 侧 Favorites( 收藏 ) 和 Help (帮助 ) KALBAR A Tools K, EZK T E 
Toolbars (工具 栏 )， 然 后 选择 Explorer Bar (EASES )， 最 后 再 选择 “IE Developer Toolbar" 
B[ n] 。 


> Eric's Archived Thoughts: Rounding Off - Windows Internet Explorer 


Go x FF http:J/meyerweb.com/eric/thoughts/2010/02/10/rounding-ofF] 好 | X | 300gle 


File Edit View Favorites Tools Help 


3 d [des Archived Thoughts: Rounding Off - t^c X 时 - dah ~ z} Page -| 舍 E 


Delete Browsing History... 


Pop-up Blocker 
Phishing Filter 
Manage Add-ons 
Work Offline 
Windows Update 
Full Screen 


Archives css Toolbox Writing Speaking Leftovers i [ Seard v Menu Bar 
Favorites Ctrl+Shift-+1 


History Ctrl+Shift-+H 
: Feeds Ctrl+Shift+J 
Rounding Off | 


Wed 10 Feb 2010 In the course of digging into the guts of a much more complicated problel Links 
kHz interesting philosophical question posed by web inspection tools. | w Status Bar 


Browsers Consider the following CSS and HTML | v Lock the Toolbars 
CSS Customize... 
Web p ifont-size: 10px;] oS 
b {font-size: 1.04em;} 


—— <p>This is text «b»with some boldfacing</b>. </p> 
. " January 
Simple enough. Now, what is the computed font-size forthe b element? 
Sidestep 
Next entry: 
Fixed Monospace Sizing 


Now. consider the ramifications of both choices on a situation where there are b elements nested Previous entry: 
ten layers deep Events and A Day, Belatedly 


There are two valid answers. Most likely one of them is intuitively obvious to you, but take a 
moment to contemplate the rationale for the answer you didn't pick 


If you hold that the answer is 10px, then the computed font-size ofthe tenth level of nesting i gi Archived 
should still be 10px, because at every level of nesting the mathematical answer will be rounded = 
down to 10. That is: for every b element, its computed font-size will be round(10*1. 04). | | [search ] 
which will alwavs vield 10. 


i 
TS z u i mm á > 
@ Internet Q100% ~ .: 


ts Start Eric's Archived Thoug... >] © 4:16PM 


To return to your computer, press Control-38 $ *?o6g-««m P 


1-16 IE 开发 者 工具 栏 在 IE7 右 上 角 
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单 击 IE Developer Toolbar 后 ， 你 就 会 看 到 在 浏览 大 窗口 底部 打开 了 一 个 像 Firebug 一 样 的 面 
板 ， 如 图 1-17 所 示 ， 在 面板 顶部 也 有 一 些 跟 Web Developer Toolbar 很 像 的 菜单 。 单 击 面 板 右 上 和 角 
关闭 按钮 附近 的 层 著 窗口 小 图 标 , 可 以 使 面板 扩展 为 一 个 独立 的 窗口 , 通过 这 种 方式 扩展 面板 对 
于 一 些 低 分 辨 率 的 上 网 本 和 高 射 投影 仪 来 说 特别 有 用 。 


eoo (3) WinXPro - IE? 三 
Eric's Archived Thoughts: Rounding Off - Windows Internet Explorer (fe |x) 


Gc v) T lē] http://meyerweb.com/eric/thoughts/2010/02/10/rounding-off/ *£ X | ;oogle | Pir 


File Edit View Favorites Tools Help 


fp > Ey» æ ~ [Page - Cj Tools ~ T 


Li d | e Eric's Archived Thoughts: Rounding Off 


Archives CSS Toolbox Writing Speaking Leftovers 


Rounding Off- 


In the course of digging into the guts of a much more complicated problem, | stumbled into an 
interesting philosophical question posed by web inspection tools 


rowsers Consider the following CSS and HTML 
CSS 


H- <HEAD> : E - — 一 zu ulia 
B- «BODY class=hpg id=www-meyerweb-com> Name value Property 
由 - <DIV id=sitemast> 
由 - <DIV id=search> 
B- <DIV id=main> 
E- <DIV class=skipper > 
H- <DIV class=skipper > 
S- «DIV on background-position-x 
S- «DIV class=entry> background-position-y 


| <HTML> ^ attribute: | >< | Node: [H3 | Current Style: 
Current Value 
accelerator 
background-attachment 
background-color 
background-image 


background-repeat 


由 <UL class=meta> behavior 
<DIV class=text> a: Dicti 
#comment | = 
E- <DIV id=comments> y| Ll Show Read-Only Properties Show Default Style Values 


@ Internet A 100% + 


‘2 start Eric's Archived Thoug... n D 4:17 PM 


IE Developer Toolbar 


To return to your computer, press Control- 3$ X 9 Q g €» « fal p 


图 1-17 ”运行 中 的 正 开 发 者 工具 栏 


这 个 工具 栏 有 个 很 好 的 功能 ， 就 是 通过 Show Default Style Values ( 显示 默认 样式 值 ) 复 选 框 
可 以 很 容易 地 在 计算 样式 和 声明 样式 之 间 进 行 切 换 ( 如 图 1-18 所 示 )。 同 样 ， 通过 Show Read-only 
Properties ( 显示 只 读 属 性 ) 复 选 框 可 以 查看 当前 元 素 的 DOM (Document Object Model， 文 档 对 
象 模型 ) 属性 的 每 个 细 枝 术 节 。 如 果 你 不 熟悉 JavaScript 和 DOM 肢 本 编程 ， 这 些 可 能 还 不 适合 你 
( 当然 ， 它 也 不 适合 我 )。 

IE 开 发 者 工具 栏 包 含 了 Web Developer Toolbar 的 部 分 功能 ， 但 把 大 部 分 最 有 用 的 功能 放 在 了 
第 一 层 菜 单 中 ,诸如 标示 元 素 和 验证 本 机 的 HTML 和 CSS。 查 看 菜单 中 还 有 一 个 很 小 巧 的 功能 ， 
即 CSS 选 择 需 匹配 (如 图 1-19 所 示 )， 它 会 弹出 一 个 窗口 展示 CSS 中 的 每 条 规则 及 其 匹配 了 文档 中 
的 多 少 元 系 ， 如 果 有 的 规则 显示 0 匹配 ， 则 说 明 该 规则 没有 匹配 页 面 上 的 任何 元 了 水 ， 可 以 考虑 删 
掉 这 条 规则 。 
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Eric's Archived Thoughts: Rounding Off - Windows Internet Explorer 辐 回 加 | 


oo X (E http:l/meyerweb.com/eric]thoughts/2010/02/10]rounding-off] Nj +4 | x | Google |e |=] 


File Edit View Favorites Tools Help 


we od a Eric's Archived Thoughts: Rounding Off 


t = E S = “Pik TTE. 


Archives CSS Toolbox Writing Speaking Leftovers 


Search 
Powered by Google 


Rounding Off — 
February 2010 


Wed 10 Feb 2010 In the course of digging into the guts of a much more complicated problem, | stumbled into an 
cu interesting philosophical question posed by web inspection tools 


Consider the following CSS and HTML: 


Browsers 
CSS 


Hi] 


Is] 54 8X | File Find Disable View Outline Images Cache Tools Validate 


| & «HTML» ^ s Te 
— H : [H3 
B Enn Attribute $| X| Node 


B- <BODY class=hpg id=www-meyerweb-com> Name Value 
Œ- <DIY id=sitemast > 
Œ- <DIV id=search> 
E- «DIV id=main> 
E- <DIY class=skipper > 
Œ- <DIY class=skipper > 
B- «DIV id=thoughts > 
B- <DIV class=entry > 
<H3> 
由 - «UL class=meta> 
由 <DIV class=text> 


#comment m 
E- <DIV id=comments> ww | Cl Show Read-Only Properties Cl Show Default Style values 
(i — 


@ internet Q100% > : 


start Eric's Archived Thoug... g? & 日 4:17PM 


X 


P—vooHBH«om a 


Current Style: 


Property Current Value 
border-bottom-color #999 
border-bottom-style solid 
border-bottom-width 1px 

border-color #202020 #202020 #999 
border-left-color #202020 
border-right-color #202020 

border-style none none solid 
border-top-color #202020 


hardar-midkh madiin madim 1nv 
| Ail 


IE Developer Toolbar 


To return to your computer, press Control-3 


Eric's Archived Thoughts: Rounding Off - Windows Internet Explorer 


Go X fa http://meyerweb.comj/eric/thoughts/2010/02/10/rounding-off 


File Edit View Favorites Tools Help 


ww Erics Archived 


e Match count report 
File Edit 


| /* 0 match(es) for: */ 
/* Rule 1 of skel.css */ 
-oldbl { 
DISPLAY: block !important 


/ 


/* 0 match(es) for: */ 
/* Rule.2 of skel.csa. Sy 
.oldin ( 

DISPLAY: inline !important 


Archives CSS 


(OO (0 (0 3 Q (1 WON I 


Nd 


} 


Wed 10 Feb 2010 /* 1 match(es) for: */ 
1342 Li /* Rule 3 of skel.css */ 
1 IMG.pic { 


Browsers 
css 


B] t+ RR [e | File 


DISPLAY: block !important 
} 
/* 0 match(es) for: */ 
/* Rule 4 of skel.css */ 


<HTML> 
tH <HEAD> 2 
E- «BODY class=hpg 3! 


< 


-ahem { 
DISPLAY: none 


/* 2 match(es) for: 
/* Rule 5 of skel.css */ 
.Skipper { 
DISPLAY: none 


! important 


! important 


Ail 


由 - «UL class=meta> 
由 - <DIY class=text> 
#comment 

= <DIV id=comments> 


IE Developer Toolbar 


start Eric's Archived Thoug... 


Cl Show Read-Only Properties 


@ Internet 100% + :: 


z Match count report 


To direct input to this virtual machine, click inside the window. 


图 1-19 


选择 硕 匹 配 报告 


border-style 


border-top-color 
hewearauiclth 


none none solid 
#202020 


madi ie radiis 10v 


m E | 


v 


C] Show Default Style Values 


gy? 
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IE8 内 置 了 一 个 开发 人 员工 具 ， 所 以 就 不 用 额外 安装 了。 帮助 文档 是 在 线 的 ， 截 至 撰写 本 书 
之 时 ， 该 文档 仍 放 在 一 个 比 IEDT 的 URL 强 不 了 多 少 的 URL 地 址 上 。 所 以 还 是 打开 你 最 喜爱 的 搜 
RIV, Anai A “Discovering Internet Explorer Developer Tools”， 第 一 个 搜索 结果 应 该 就 是 该 
文档 了 。 

想 打 开 这 个 工具 的 话 ， 在 下 的 Tools 半 单 中 选择 Developer Tools ( 开发 人 员工 具 ， 如 图 1-20 所 
IR ) 或 者 按键 盘 上 的 F12 健 即 可 。 可 以 看 到 它 跟 IE Developer Toolbar 的 界面 很 像 , 可 以 说 是 Firebug 
和 Web Developer Toolbar 混 合 的 产物 。 它 的 亲 单 大 部 分 和 IE7 的 开发 者 工具 栏 很 像 ， 但 是 跟 IE7 的 
开发 者 工具 栏 相 比 ， 那 些 选项 卡 却 更 像 Firebug。 


SZ 


^7 Eric's Archived Thoughts: Rounding Off - Windows Internet Explorer [B 
G Ə v a meyerweb.com/eric) punding-offf ——————— | K witt x l5: J u el 

File Edit View Favorites Tools Help i j 
jy Favorites | $ & ~ [O Free Hotmail Æ) * Æ| Firebug Lite 


FJ Eric's Archived Thoughts: Rounding OFF ai > 回 de Pager Safety + 


e- z 
A Reopen Last Browsing Session d: 


[E] Pop-up Blocker d 
3] Manage Add-ons 


€x Work Offline 
A Compatibility View 


= Compatibility Wiew Settings 
Rounding Off [EF] Full Screen F11 


Wed 10 Feb 2010 In the course of digging into the guts of a much more complicated problem. | stumbled into an Toolbars á 
interesting philosophical question posed by web inspection tools 


Explorer Bars » 


Browsers Consider the following CSS and HTML: v 
File Find Disable View Outline Images Cache Tools Validate Browser Mode: IES Document Mode; IE8 Standards Suggested Sites m 
HTML | CSS Script Profiler Windows Messenger p 
Diagnose Connection Problems... 
ls ER bd *& hh [9T Cw Style Trace Styles Layout Á 
S <html> ^. &[v]inherited - html Internet Options y 
E «head profile="http: //gmpg.org/xfn/1"> = [v]* meyerweb.css 
<body class="hpg" id="win-meyerweb-com™> [7] E559 in 
<div id="sitemast"> =) [Vjinherited - body 
g-[v]* meyerweb.css 
[v] fen Size s—l1o0% 
&-[v]BoDY neyerweb.css 
BES :—0.-84em4, L-333—ÀArial sans-serif 
[v]color : #202020 
&-[v]BopY print.css 


[v] font : l2pt "New Century Schoolbook", "Times New Roman", Ti 
E [v]imherited - div 
g-[v]* meyerweb.css 
i Von can start editinm here -> = Mlfonrwsico 。 100s 
< | > < | > 


gy X-browser (Not Resp... 


To return to your computer, press Control-3 $ 9 a €» « [a] F 


图 1-20 IESBJJFA A4 LH. 


对 于 开发 人 员工 具 的 Style C 样式 ) 选项 卡 来 说 有 一 件 事 让 我 感到 很 困惑 ， 就 是 样式 的 排列 顺 
序 对 我 来 说 没有 任何 意义 , 它 不 是 按照 特殊 性 顺序 排列 的 。 尽 管 这 个 列表 确实 显示 了 哪些 声明 被 
其 他 声明 禾 盖 了 (这 也 挺 好 的 )， 但 是 不 像 Firebug 那 样 有 明确 的 顺序 ， 不 太 好 用 。 

尽管 如 此 ， 即 便 开 发 者 工具 栏 和 开发 人 员工 具 不 能 池 盖 Firebug 或 Web Developer Toolbar 的 全 
部 功能 ， 它 也 还 是 很 有 用 的 。 任 何 网 页 开发 人 员 都 应 该 把 它 装 在 Internet Explorer 上 ， 它 对 于 查看 
布局 的 源 代码 和 追踪 下 的 各 种 怪异 错误 非常 好 用 。 


Wr Be ) 


1.4 Dragonfly (Opera 浏览 器 


如 条 主要 用 Opera 浏 览 需 进行 开发 ,那么 你 会 用 到 Dragonfly( 如 图 1-21 所 示 ), 它 是 一 个 Opera 9.5 
及 以 后 版 本 内 置 的 开发 环境 ， 访 问 opera.com/dragonfly 可 以 获得 更 多 信息 。 
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Opera Dragonfly — Bug control, accelerated 


Welcome to Opera Dragonfly alpha, the fully featured debugging environment for Opera Presto based 
browsers. Opera Dragonfly allows you develop faster and easier by providing tools to debug your 
JavaScript, and inspect the DOM, CSS, network traffic and data stores. Developing for mobile has 
never been easier with Opera Dragonfly,s built in remote debugging. Opera Dragonfly is included in 
Opera 9.5 and above, and can be activated from the Developer Tools menu or right clicking and 
selecting Inspect Element. 


1-21 Dragonfly 的 主页 


打开 Dragonfly 的 默认 方式 是 单 击 Tools 玉 单 ， 然 后 在 Advanced ( 高 级 ) 选项 下 选择 Developer 
Tools ( 开发 者 工具 )， 你 还 可 以 安 疙 一 个 Debug ( 调试 ) KÉ, UVilnJopera.com/dragonfly n] LJ 35,5] 
安装 链接 "”， 一 旦 安装 完成 ， 就 有 了 一 些 访问 Dragonfly 和 其 他 功能 的 快捷 方式 。 当 然 ， 你 也 可 以 
使 用 键盘 快捷 键 打开 Dragonfly, Mac 快 捷 键 是 Option+Command+I, Windows-Option+Control+I® , 
但 奇怪 的 是 , 这 里 的 键盘 快捷 键 是 不 能 进行 切换 的 。 如 果 已 经 打开 了 Dragonfly， 就 不 能 使 用 键盘 
快捷 键 关 掉 它 了 。 这 种 情况 下 就 需要 使 用 鼠标 或 者 Command+W ( Control-W ) AHE, XE 
Dragonfly 作 为 独立 的 窗口 打开 时 很 管用 ， 但 是 当 Dragonfly 停 靠 在 浏览 器 窗口 时 则 仅 当 单 击 
Dragonfly 使 其 获取 焦点 时 Command+W 才 能 关 掉 它 ， 否 则 会 关 掉 整 个 窗口 ”。 

Debuy 菜 单 有 个 很 好 的 特性 ， 它 包含 了 到 HTML 、CSS 和 其 他 规范 的 链接 。 还 有 个 好 玩 的 地 
方 是 它 的 Layout ( 布局 ) 子 菜单 ， 可 以 将 Opera 设 置 成 像 Emulate Text Browser (模拟 文本 浏览 器 ) 
和 Show Structural Elements ( 显示 绪 构 元 素 ) 那样 的 布局 模式 ， 甚 至 还 有 一 种 Nostalgia(〈 怀旧 ) 
布局 模式 〈 如 图 1-22 所 示 )， 它 可 以 温暖 任何 一 个 80 年 代 计 算 机 老兵 的 心 。 

虽然 Dragonfly 的 界面 布局 跟 Firebug 的 非常 相似 , 但 也 有 一 些 显著 的 不 同 。 首先 , 右 侧 的 Style 
选项 卡 可 以 显示 计算 样式 和 声明 的 样式 ( 如 图 1-23 所 示 ), 每 个 分 组 都 可 以 扩展 和 收缩 。 跟 Firebug 
一 样 ,你 看 到 的 也 不 完全 是 声明 的 属性 ,因为 简写 的 属性 也 同样 被 扩展 成 了 独立 的 属性 Dragonfly 
有 个 很 好 的 体验 ， 就 是 如 果 你 想 查看 简写 属性 ， 那 么 至 少 在 计算 样式 里 可 以 看 到 。 


(D 在 翻译 本 书 时 ， 最 新 的 主页 上 已 经 找 不 到 安装 链接 了 。 
(2) Windows 下 Opera 最 新 版 本 11.60 的 快捷 键 应 为 Ctrl+Shift+I。 
(3) 最 新 版 本 Opera 11.60 已 经 修复 该 问题 ， 可 以 使 用 快捷 键 进行 切换 。 


aN 


Open Opera Dragonfly ‘i 


User Agent 
Validate 
Mobile View 


Check | 
Disable Accessibility Layout 


Reload Debug with Outline 
Specifications Disable Tables 
Emulate Text Browser 
Hide Non-Linking Images 
High Contrast (B/W) 
High Contrast (W/B) 
v Nostalgia 


Show Images and Links only 
Show Structural Elements 


[Skip to content] 


O htto://www.opera.com/dragonfly/ vill 


Browsers Add-ons Press Company Business ? OPERA 
software 


DOM Scripts Network Error Console Settings 


号 D AER Z [e As le | Opera Dragonfly | Take a peek into the (v] a Search in i Quick find 


— <body id*"products"» 
v 
Jre aas | Computed Style 


+ <p class="yank"> background: rgba(44, 44, 44, 


站 去 0.505882); 
<div ide"nav'» background-color: rgba(44, 44, 44, 


— <ul id="mainmenu"> 


+ 


<li class="home sfhover"> 

— <a href="/" accesskey="1" class="sffocus"> 
+ <span> | ty aces 
</a> 

</li> 

<li class="products"> 

<li class="addons on"> 

<li class="press"> 

<li class="company"> 

<li class="b2b"> 

<li class="support"> 


</ul> 


</di 


V> 


+ <hl id="brand"> 


+ <div 
+ <div 
+ <div 
</div> 
<script 
<script 
<script 
<script 
<script 
</body> 
</html> 


id="header" class="section"> 
class="section separator"» 
id="footer"> 


type="text/javascript"> 

src="http://www.google-analytics.com/ga.js" type="text/javascript"> 
type="text/javascript"> 

type-"text/javascript" src="/js/sfga.js"> 

type="text/javascript"> 


DOM Stylesheet 


国 z 回 — html > body#products > div#page > div#nav > ul#mainmenu > li.home.sfhover > a.sffocus > span 


为 外 一 个 与 Firebug 的 差 寞 (不 太 受 欢迎 ) 是 , FEA CEI Ps HA IRSE CE, qu EUR 
Pra CLR [overwritten] 文 字 跟 在 后 面 ( 如 图 1-24 所 示 )， 这 会 显得 很 乱 ， 而 且 很 难看 清 被 窗 


盖 的 声明 的 值 "。 


0.505882); 

border: Opx #ffffff; 
border-bottom: Opx #ffffff; 
border-bottom-color: #ffffff; 
border-bottom-style: none; 
border-bottom-width: Opx; 
border-color: #£f£ffff; 
border-left: Opx #ffffff; 
border-left-color: #f£f£ffff; 
border-left-style: none; 
border-left-width: Opx; 
border-right: Opx #£fffff; 
border-right-color: #f£fffff; 
border-right-style: none; 
border-right-width: Opx; 
border-top: Opx #ffffff; 
border-top-color: #ffffff; 
border-top-style: none; 
border-top-width: 0px; 
bottom: 29px; 

box-sizing: content-box; 
color: #ffffff; 

cursor: auto; 

font: normal normal 400 12px/45px 
"Helvetica Neue"; 
font-family: "Helvetica Neuve"; 
font-size: 12px; 

font-style: normal; 
font-weight: 400; 

height: Opx; 

left: 20px; 


Styles Properties Layout 


图 1-23 ”计算 样式 分 组 展开 时 的 Dragonfly 


CD 最 新 版 Opera 11.60 中 的 Dragonfly 已 经 解决 该 问题 ， 此 处 体验 与 Firebug 一 致 。 


1.4 Dragonfly ( Opera i] 


Home Browsers Add-ons Company Business 


OPERA 


software 


Overview Documentation Feedback Blog 


We 
AU, 


DOM Scripts Network Error Console Settings 


号 LJ DX ER) X. (ete) (As) le | Opera Dragonfly | Take a peek into the (v] à Search 
= <body 1d="products"> = 
— <div id="page"> 
+ <p class="yank"> 
— <div id="nav"> 
— <ul id="mainmenu"> 
— <li class="home sfhover"> 
— <a href="/" accesskey="1" class="sffocus"> 
* <span> l 
</a> 
</li> 
<li class="products"> 
<li class="addons on"> 
<li class="press"> 
<li class="company"> 
<li class="b2b"> 
+ <li class="support"> 
</ul> 
</div> 
+<h1 id="brand"> 
+ <div id="header" class="section"> 
+ <div class="section separator"> 
+ <div id="footer"> 
</div> 
<script type="text/javascript"> 
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"> 
<script type="text/javascript"> 
<script type="text/javascript" src-"/js/sfga.js"» 
<script type="text/javascript"> 


DOM Stylesheet 
Ede [G] = htm! > body#products > div#page > div#nav > ul#mainmenu > li.home.sfhover > a.sffocus > span 


4 Quick find 


inherited from li 


#nav li ( 
[overwritten] 
list-style-image: none; 


html, body, div, span, object, iframe, 
hl, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, code, 
del, dfn, em, img, q, dl, dt, dd, ol, 
ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, 
th, td { 

[overwritten] 

[overwritten] 

[overwritten] 
[overwritten] 


inherited from ul 


#nav ulfmainmenu { 
list-style-position: inside; 
list-style-type: none; 


[overwritten] 


ul { 


[overwritten] 
Y 


Styles Properties Layout 


图 1-24 Styles 选 项 卡 中 展示 被 上 覆盖 的 样式 ( 男 见 彩 插图 1-24 ) 


图 1-25 展 示 了 Layout ( 布局 ) 选项 卡 ， 它 可 以 显示 当前 被 检查 元 系 的 布局 框 ， 这 里 不 仪 可 以 
显示 布局 框 的 大 小 ， 还 能 显示 许多 属性 的 像素 值 ， 比如 offsetTop 和 scrol1Left 等 。 


(>i) [9] (A) 2) O http: //www.opera.com/dragonfly/ 


Home Browsers Add-ons Press Company Business 


OPERA 


software 


DOM Scripts Network Error Console Settings 


40 Us (ER Z. [a As kk Opera Dragonfly | Take a peek into the (v) à Search 
= <body 1d="products"> = 
— <div id="page"> 
+ <p class="yank"> 
— <div id="nav"> 
— <ul id="mainmenu"> 
— «li class="home sfhover"> 
— <a href="/" accesskey="1" class="sffocus"> 


class="products"> 
i class="addons on"> 
i class="press"> 
i class="company"> 
i class="b2b"> 
class="support"> 


</div> 

+ «hl id="brand"> 

+ <div id="header" class="section"> 

+ «div class="section separator"> 

+ <div id="footer"> 

</div> 
+ <script type="text/javascript"> 
+ «script src*"http://www.google-analytics.com/ga.js" type="text/javascript"> 
+ <script type="text/javascript"> 
+ «script type="text/javascript" src="/js/sfga.js"> 
+ <script type="text/javascript"> 
</body> 

</html> 


DOM Stylesheet 
HE] = html > body#products > div#page > div#nav > ul#mainmenu > li.home.sfhover > a.sffocus > span 


Opx 
Parent Offsets 


html > body#products > div#page > 
div#nav > ul#mainmenu > li.home.sfhover 


> a.sffocus > span 


Offset Values 


offsetT 15 
offsetLel 20 
peat beat 32 

setHei 14 
scrollT 0 
scroll 0 
scrollWidth 32 
scrollHeight 14 
olam op 0 
client 0 
clientWidth 32 


mimmat Bent mini A 


Styles Properties Layout 


图 1-2$ ”Dragonfly 详 尽 的 Layout 选 项 卡 


oa 
eu 


) 
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1.5 Web 检查 器 (Safari 浏览 器 ) 


如 果 你 主要 用 Safari 浏 览 锅 进行 开发 ， 那 么 就 会 用 到 Web 检 查 需 (Web Inspector )。 

要 想 使 用 Web 检 查 硕 ， 打 开 Safari 的 Preferences(〈 偏好 设置 ) 选择 Advanced ( 高 级 )， 然 后 将 
Show Develop menu in menu bar ( 在 沫 单 栏 中 显示 开发 菜单 ) 前 面 的 复 选 框 勺 选 上 ， 如 图 1-26 所 
示 。 当 完成 这 些 之 后 , 你 就 可 以 通过 单 击 Develop ( 开发 ) 末 单 下 的 Show Web Inspector ( 显示 Web 
检查 器 ) 打开 Web 检 查 嚣 了， 或 者 通过 键盘 快捷 键 Option+Command+I 开 启 "。 跟 Dragonfly 一 样 ， 
Web 检 查 器 的 键盘 快捷 键 也 不 能 进行 切换 ， 如 果 Web 检 查 器 已 经 打开 的 话 就 不 能 用 快捷 键 关闭 它 
To 这 种 情况 下 需要 使 用 鼠标 ， 而 Command+W 只 有 在 Web 检 查 需 作为 独立 窗口 打开 时 才 起 作用 ， 
如 果 Web 检 查 需 停靠 在 主 窗 口 ， 那 么 使 用 Command+W 的 话 就 会 关 掉 整 个 窗口 。 


mA 


Weblnspector - WebKit 
4 | > | | 个 A + | https://trac.webkit.org/wiki/WebInspector C | (Q* Google o 


«| Webinspector - WebKit p 
| I 
S| 


Search 


Register | Lost Password | Login 


| Index Histo Last Change Watch Page 
Universal Access: {_}Never use font sizes smaller than 9 ™ y "9 2 


Web Inspector 


[C] Press Tab to highlight each item on a webpage 


The Web Inspector allows you t Option-Tab highlights each item. 


more! 


Enabling Web Inspector 


* Safari 一 Enable the Devel Style sheet: | None Selected E jn, Develop menu or Inspect Element 
context menu to access th 


e Any WebKit client — Find | 
and relaunch the applicatij 


e Google Chrome — Enablec Proxies: Change Settings... ) pr 
or 


nal, inserting the bundle identifier, 


M Show Develop menu in menu bar 


defaults write «bundle-identifier-here» 
Using the Web Inspector 


The Web Inspector can be opened by right clicking anywhere on a web page and choosing Inspect Element. Once open, it highlights the 
node on the page as it is selected in the hierarchy. You can also search for nodes by node name, id and CSS class name. 


One of the unique features of the inspector is the ability to root the DOM hierarchy by double clicking a node to dig deeper. This lets you easily 
manage large nested pages and only focus on a particular sub-tree with minimal indentation. 


The Node pane shows the current node type and name, as well as any element attributes. 

Under the Style pane we show all the CSS rules that apply to the focused node. These rules are listed in cascade order with overridden 
properties striked-out—letting you truly see how cascading stylesheets affect the page layout. All shorthand properties have a disclosure- 
triangle to show and hide the expanded properties created by the shorthand. 


The Metrics pane provides a quick visual look at how margins, borders and padding affect the current node. 


Various HTML and JavaScript properties, including length of text nodes, offsetWidth/Height, class names, and parent/sibling information are 


Zl 


11-26 FJA Develop. 


尽管 Web 检 查 融 的 界面 布局 跟 Firebug 的 非常 像 , (EAP AN E PUY k 
Computed Style ( 已 计算 样式 ”) 作为 一 个 分 组 ， 如 图 1-27 所 示 。 跟 Firebug 一 样 ， 这 里 看 到 的 也 不 
全 是 声明 过 的 属性 ， 因 为 价 写 的 属性 也 会 被 扩展 成 独立 的 属性 ， 并 有 旦 如 果 选 择 了 Show Inherited 
(显示 继承 的 样式 ) 就 会 得 到 一 个 很 长 的 属性 列表 。 

在 它 的 正 下 方 , 当前 被 检查 元 素 的 每 条 规则 都 以 独立 的 分 组 显示 。 可 以 分 别 展开 或 收 起 每 个 


(D Windows 下 的 Safari 快 捷 键 为 Ctrl+Alt+I。 
D 面板 上 的 各 个 中 文 标签 参照 Safari 中 文 版 界面 。 


1.5 Web 检查 器 Safari 浏览 器 ) 21 


分 组 , 而 这 些 分 组 的 下 方 是 Metrics( 版 式 ) 子 面板 , 它 展示 了 当前 被 检查 元 素 的 布局 框 的 尺寸 ( 如 
图 1-28 所 示 )。 


Lg | | |) [cA] [+] ae https: //trac.webkit.org/wiki/WebInspector c 


Enabling Web Inspector 


e Safari — Enable the Develop menu option in the Advanced preferences. Use the optional toolbar button, Develop menu or Inspect Element 
context menu to access the Web Inspector. 


* Google Chrome — Enabled by default, use the Inspect Element context menu to access the Web Inspector. 


e Any WebKit client — Find the application's bundle identifier. Enter the following command once in Terminal, inserting the bundle identifier, 
and relaunch the application in order to use the Web Inspector. 


defaults write «bundle-identifier-here» WebKitDeveloperExtras -bool true 


Using the Web Inspector 


The Web Inspector can be opened by right clicking anywhere on a web page and choosing Inspect Element. Once open, it highlights the 
node on the page as it is selected in the hierarchy. You can also search for nodes by node name, id and CSS class name. 


D Q Search Elements 
EE E E E A ERREUR SEE 


wv «html xmins="http://www.w3.org/1999/xhtml "> v Computed Style — B Show inherited 


> <head> -webkit -background-clip: border-... 
et M —- 
iv id=" - ground-attachment: scroll; 
4 im ach somo class ="nav"> 本 
background-image: none; 

> «div id 2" main" d ot repeat; 

=" - z'en* : ="en" color: 4 
arae id ="footer™ lang-" en" xml:lang="en"> display: Mock: 

yo font-family: Verdana, Arial, 'Bitstre... 
</html> font-size: 13px; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
height: 1970px; 
line-height: normal; 
margin-bottom: 10px; 
margin-left: 10px; 
margin-right: 10px; 
margin-top: 10px; 
padding-bottom: Opx; 
padding-left: Opx; 
padding-right: Opx; 
padding-top: Opx; 
width: 989px; 


Y body, th, td /chrome/common 


图 1-27 已 计算 样式 


hala |) [cA] 3 https:/ /trac.webkit.org/wiki/WebInspector ce 


Enabling Web Inspector 


* Safari — Enable the Develop menu option in the Advanced preferences. Use the optional toolbar button, Develop menu or Inspect Element 
context menu to access the Web Inspector. 


e Google Chrome — Enabled by default, use the Inspect Element context menu to access the Web Inspector. 


e Any WebKit client — Find the application's bundle identifier. Enter the following command once in Terminal, inserting the bundle identifier, 
and relaunch the application in order to use the Web Inspector. 


defaults write «bundle-identifier-here» WebKitDeveloperExtras -bool true 
Using the Web Inspector 


«IDOCTYPE html PUBLIC *- //W3C/ /DTD XHTML 1.0 Strict/ / EN" "http: // 
w «html xmins="http://www.w3.org/1999/xhtml “> 
> <head> 


b <div id =" banner" > 

> «div id =" mainnav" class ="nav"> 
b <div id ="main"> > background: white; 
» <div id ="footer" lang="en" xml:lang="en"> 2 S tt 
</body> > padding: 0px; 


</html> user agent stylesheet 


图 1-28 EA PREEN 91H 
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1.6 XRAY 


WIR IERR— “Me BY. Be a oc ze he eae, ABA 1-29" PANY XRAY—KE "ÍR 
合 你 的 家 口 "。 它 的 功能 非 第 有 限 , TEM ie Bo ae A, MARTIRE SESE IE 
它 的 强项 。 


e o 
Ss 


4) Ce) C Ct) Cal http: jwwwwestciv.com/xray/ 


tools & resources for web professionals 


style master tools resources downloads store RSS 5 


XRAY: look beneath the skin style master 


download demo 
XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and 
Mozilla based browsers (including Safari, Firefox, Camino or 
Mozilla). Use it to see the box model for any element on any web page. 


buy now - $59.99 
product info 


See what's new in this version. Upgrading to future versions should not 
require changing your bookmark! 


Drag XRAY to your bookmarks bar 


Load any web page 
Hit the XRAY bookmark 
Click elements on the page to XRAY them 


Go here for more detailed instructions or more about XRAY. 


If you just want to try it out, simply click the XRAY button above. 


图 1-29 XRAY 的 页 面 


打开 westciv.com/xray， 直 接 把 那个 大 大 的 XRAY 按 钮 拖 放 到 你 的 书签 栏 (或 者 拖 到 菜单 栏 ， 
如 果 你 想 把 它 隐藏 的 话 ) 然后 , 任何 时 候 当 你 打开 一 个 页 面 并 且 想 检查 某 个 元 素 时 , 打开 XRAY， 
然后 选择 感 兴趣 的 元 系 即 可 。 

选择 元 素 之 后 , 元 素 会 突出 显示 且 其 各 边 就 会 出 现 尺 寸 信 息 , 你 还 会 看 到 XRAY 框 , 如 图 1-30 
所 示 。XRAY 杠 里面 会 提供 一 些 额外 的 信息 ， 诸 如 元 素 在 文档 树 中 的 位 置 、ID 或 类 的 值 、 核 心 的 
CSS 属 性 值 等 。 如 果 选 择 了 继承 结构 (inheritance hierarchy ) 的 任何 元 素 ，XRAY 会 继续 检查 该 元 
素 "。 单 击 XRAY 框 右上 角 的 关闭 图 标 即 可 退出 XRAY， 直 到 下 次 需要 的 时 候 再 打开 。 

还 有 一 个 类 似 但 用 途 不 同 的 工具 ， 即 MRI (westciv.com/mri )， 它 允许 你 输入 选择 货 ， 人 然后 束 
可 以 在 页 面 上 显示 都 有 哪些 元 系 被 选中 了 。 


(D XRAY 会 一 直 检 查 你 当前 单 击 的 最 内 层 的 元 素 ， 即 单 击 事件 发 生 的 元 素 。 
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e i o XRAY :: for A pers —J 
(4) O OG) / uw Y "3 Google Q £2, 


174px, 133px 


XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and 
Zi Mozilla based browsers (including Safari, Firefox, Camino or 
Mozilla). Use it to see the box model for any element on any web page. 


524.667px 


element: p 


ic: 
class: 


inheritance hierarchy 
html > body > div > div» p 


position: static rder margin 


top: auto (174px) top: Opx 

left: auto (133px) right: Opx right: Opx 
width: 524.667px (525px) bottom: 24px 
height: 72px (72px) left: Opx 
float: none 


图 1-30 ”运行 中 的 XRAY 


1.7 SelectORacle 


如 图 1-31 所 示 ，SelectORacle 这 个 名 字 听 起 来 像 是 茶 个 数据 库 产 品 的 广告 ,但 它 破 不 是 ! TH 
反 ， 它 是 一 个 可 以 将 有 效 的 选择 带 转 换 成 类 似 常 规 喘 语 的 在 线 工 具 。 这 个 名 字源 日 于 “选择 右 ” 
(selector) 和 “预言 ”( oracle ) 的 组 合 。 

打开 gallery.theopalgroup.comy/selectoracle 并 且 输 入 一 个 或 多 个 有 效 的 CSS 选 择 希 , 随便 多 复杂 
都 行 。 选 择 英 语 或 者 切换 到 西班牙 语 ， 然 后 单 击 Explain This! ( 解释 ) 按钮 就 会 得 到 每 个 选择 需 
的 完整 解释 。 例 如 : 

ul li:nth-child(2n+3) :not (:last-child) 

会 被 解释 成 : 

选择 ul 元 素 的 后 代 元 素 中 ， 从 第 三 个 子 元 系 开 始 的 索引 为 奇数 的 全 部 11 元 素 ， 且 不 包含 最 
后 一 个 1i 元 素 ”。 


(D 该 工具 主要 面向 英文 用 户 ， 目 前 还 没有 中 文 版 。 


eoo SelectORacle = 


E secu EE 
The OPAL Group 


Helping further the cause of understanding standards! 


: cu ME 
X S 
" e 
Í z B 
4 
y p, 


Y 
gallery home 


English & Spanish translations of CSS2 and CSS3 selectors 
Ever wondered what a particularly complex CSS selector really means? Here's your chance to find out! Simply enter one or more semi-colon separated 
selectors or rulesets into the following "Direct Input" area, or provide the URL of a stylesheet in the "URL Input" area. Best of all, the SelectORacle will 
flag potential errors and other problems, and it won't choke on any actual rules. You've always wanted to know what makes those line-noise posers tick-- 
now you can. 


:last-of-type); 
ild); 


(will accept either HTML documents with embedded stylesheets or external stylesheets which are returned with content-type text/css Or 
text/plain) 


[41-31 SelectORacle 页 面 ( 另 见 彩 搬 网 1-31 ) 


OK ， 或 许 这 乍 一 看 有 点 儿 令 人 困惑 ， 但 是 如 果 你 慢 慢 谈 的 话 ， 大 多 数 情 部下 都 能 谈 明 白 。 
当然 ， 稚 至 撰写 本 书 之 时 ,世界 上 还 没有 任何 一 种 浏览 硕 能 够 完整 文 持 这 一 选择 硕 ， 所 以 不 必 太 
在 意 。 你 只 需要 知道 ， 当 遇 到 一 个 可 能 表意 不 清 的 选择 套 时 ，SelectORacle 或 许 能 帮 上 会 。 

你 曾 想 过 当 浏 览 送 载 人 了 过 时 的 页 面 ， 或 者 某 些 元 素 出 了 问题 ( 比如 font 元 系 ) 时 ， 浏 览 
髓 可 以 喊 你 一 下 吗 ? 现在 诊断 样式 表 (diagnostic style sheet) 就 可 以 做 到 ， 当 然 ， 只 是 视觉 上 的 
提醒 。 


1.8 ”诊断 样式 表 


当 页 面 上 的 标记 出 了 问题 时 , 诊断 样式 表 可 以 快速 给 出 视觉 提示 。 在 meyerweb.com/eric/tools/ 
css/diagnostic 可 以 找到 一 个 使 用 诊断 样式 表 的 例子 (有 CSS3 和 IE7 友 好 的 版 本 ), 还 有 个 类 似 的 资 
源 在 accessites.org/site/2006/07/ big-red-angry-text。 

那么 它 有 什么 用 呢 ? 例如 ，meyerweb ( meyerweb.com ) 的 诊断 样式 表 中 有 这 么 一 行 : 

*[style], font, center {outline: 5px solid red;} 


它 会 把 任何 含有 style 属 性 的 元 素 及 任何 字体 ( font ) TUR AEA (center ) 元 素 用 一 条 
红色 的 粗 实 线圈 起 来 。 你 还 可 以 给 它 再 加 点 儿 “SEXP, 比如 background-color: lime, 以 进 
一 步 突 显 它 。 这样 做 是 为 了 捕获 那些 有 问题 的 标记 出 现 的 地 方 , 无 论 这 些 标 记 是 从 CMS ( Content 
Management System， 内 容 管 理 系统 ) 还 是 其 他 什么 地 方 引 入 的 。 
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你 或 许 以 为 验证 可 以 捕获 任何 标记 问题 ,但 其 实 不 是 。 当 然 ， 当 你 使 用 了 font 元 素 时 它 
会 S 警告 ， 但 你 可 能 会 遇 到 验证 硕 无 法 捕获 的 一 些 问 题 ， 我 们 来 看 一 个 普通 的 JavaScript 链 

<a href="#" onclick="jJavascript:nextPage();">Next</a> 

这 段 代码 在 验证 器 下 一 切 正 常 ， 因 为 标记 是 正确 的 。 问 题 是 ， 对 于 不 使 用 JavaScript 的 用 户 ， 

这 个 链接 什么 也 不 能 做 。 这 里 应 该 有 一 个 无 脚本 (non-JS ) 时 的 百代 方案 ， 并 且 应 该 提供 一 个 可 

用 的 链接 地 址 。 因 此 ，meyerweb 的 诊断 样式 表 还 有 这 样 一 行 : 

a[href="#"] (background: lime; } 

TFT Md dE Emo AS J ae Fe: ERO o (BAREH SR PEER HE, X 
于 属性 选择 需 详 见 2.11。) 

IBA aay EAA EE CSS HE? HT EARPELS LA BURIE EAE 网 站 的 CSS 中 并 在 网 站 上 线 时 删 
R, 也 可 以 把 它 设 置 成 济 览 需 中 的 用 户 样式 表 ， 这 样 就 可 以 在 你 访问 的 任何 页 面 中 使 用 了 。 

这 里 有 一 个 完整 的 诊断 样式 表 ， 它 可 以 找 出 没有 内 容 的 空 元 素 、 没 有 alt 或 title 属 性 或 属 
性 值 为 空 的 图 像 元 系 、 找 出 没有 摘要 (summary ) 属性 和 表 头 含有 无 效 范 围 (Scope) 值 的 表 元 
系 、 含 有 有 问题 的 或 空 的 title 和 href 属 性 值 的 链接 元 又 等 。 注意 ， 由 于 含有 属性 选择 大， 该 版 
本 无 法 在 IE7 中 使 用 ， 而 由 于 含有 :not () 和 :empty() 伪 类 ， 该 版 本 也 无 法 在 IE8 中 使 用 。 图 1-32 
中 展示 了 该 诊断 CSS 的 一 个 测试 页 。 


eoo Testing 


th FR i iiim 
table#imgtest img (width: 25px; ee 25px;) 
vi:empty, 
litem, pe 
td:empty, th:empty {padding: 0.5em; background: yellow;} 


bat ls center {outline: 5px solid red;} 
class=""], *[id-""] (outline: 5px dotted red;} 


fuchsia;} 
img: dot [title]) ett solid tt 
table:not([ summary]) (outline: 5px solid red;) 
table[s — outline: 3px dotted red;) 
I solid red;) 
6. empty div follows: [ th[scopes" col” l], th[scope-"row"] (border: none;} 
a[href]: not([title]) (border: ro solid red;) 

] (outline: 3px dotted red;) 


Acad (background: lime; 
1 
7. see also first cell of following table alhrefe"" C perm ee 


li (margin: 0.67em 0;} 
Images 


[J no att empty alt filled alt 
-= 回国 D 

mw OE 3 ; 

filled titl vy 
noo 


Tables 


5. empty span [| ],and a break [ 
] 


1-32 ”诊断 CSS 的 一 个 测试 页 
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div:empty, span:empty, 

li:empty, p:empty, 

td:empty, th:empty (padding: 0.5em; background: yellow; } 
*[style], font, center (outline: 5px solid red;) 
*Ielasss""], *[ids"'"] (outline: 5px dotted red;) 
imgfalt=""] {border: 3px dotted red;j 
img:not([alt]) {border: 5px solid red;) 
img[title=""] (outline: 3px dotted fuchsia; } 
img:not([title]) (outline: 5px solid fuchsia; } 
table:not([summary]) (outline: 5px solid red; } 
table[summary=""] (outline: 3px dotted red; } 

th (border: 2px solid red; } 

th[scopes"'col"], ch[scopes'row"] {border: mone; } 
a[href]:not([title]) (border: 5px solid red;) 
a[title=""] (outline: 3px dotted red; } 
athref="#"] (background: lime; } 

a[href-""] {background: fuchsia; } 
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有 一 件 关 于 CSS 的 事情 你 可 能 没有 考虑 过 ， 那 就 是 即便 你 创建 了 HIML 文 档 后 一 行 CSS 也 不 
写 ，CSS 也 总 是 对 文档 起 作用 。 实际 上 , 有 大 量 的 CSS 被 应 用 在 “未 应 用 样式 ”的 文档 上 《如 图 1-33 
所 示 ), 它们 全 部 来 目 于 浏览 右 本 里。 标题 元 系 的 默认 大 小 和 字体 粗细 、 不 同 元 系 和 不 同行 之 间 的 
间距 、 列 表 项 前 面 的 项 目 符 号 ， 甚 至 块 元 系 和 行内 元 系 之 间 的 区 别 全 部 是 默认 样式 集 决 定 的 。 


eoo GSS Tools: Reset CSS. 


NE reri Eis 


© 
E ~ 
p *| 


meyerweb.com 

Exploration 

Submit search form Enter your search terms 
(9 meyerweb.com () Web 
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CSS Tools: Reset CSS 


The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The 


general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original 
"meyerweb reset" found its way into Blueprint, among others. 


The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't 
particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to 
match your specific reset baseline. Fill in your preferred colors for the page, links, and so on. 


In other words, this is a starting point, not a self-contained black box of no-touchiness. 


If you want to use my reset styles, then feel free! It's all explicitly in the public domain (I have to formally say that or else people ask me about licensing). 
You can grab a copy of the file to use and tweak as fits you best. If you're more of the copy-and-paste type, or just want an in-page preview of what you'll 
be getting, here it is. 

/* vi.0 | 20080212 */ 

html, body, div, span, applet, object, iframe, 


hl, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, eens big, cite, code, 
del kbd amp 


图 1-33 ”实际 上 应 用 了 许多 样式 的 “未 应 用 样式 的 ”文档 
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当然 ,不同 浏览 辫 的 默认 样式 略 有 不 同 , 这 不 能 怪 浏 览 套 三 商 ， 因 为 还 没有 规范 确切 地 说 明 
文档 应 该 具有 什么 样 的 默认 样式 。 鉴 于 这 种 情况 ， 大 部 分 浏览 器 都 尽量 模仿 Mosaic 浏 览 絮 "显示 
文档 的 效果 。 是 的 ， 确 实 是 Mosaic! 因为 它 曾 经 是 Netscape 1.0 8IIE3 55:2] 3,8 VALVES 3 HAJOG] ds o 
如 果 深 入 了 解 浏览 硕 的 默认 样式 ， 你 就 会 发 现 那 些 从 早期 的 Mosaic 测 试 厂 浏览 硕 复 制 过 来 的 东 
西 ， 甚 至 连 像 素 值 都 是 。 

作为 对 策 ， 很 多 人 开发 了 重 置 样式 ( 如 图 1-34 所 示 )， 这 意味 着 可 以 通过 设置 通用 的 属性 尽 
量 减 少 浏览 器 之 间 的 不 一 致 性 ， 最 简单 的 方式 是 : 


* (margin: 0; padding: 0s] 


C 
(9 meyerweb.com O Web 
kip to: site navigation/presentation 
{Skip to: Thoughts From Eric 
: S 


[The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The 
{general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original 
"meyerweb reset" found its way into Blueprint, among others. 

e reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't 
particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match 
your specific reset baseline. Fill in your preferred colors for the page, links, and so on. 

In other words, this is a starting anm not a self-contained black box of no-touchiness. 


font-size: 100%; 
vertical-align: baseline; 
background: transparent; 


line-height: 1; 
list-style: none; 


blockquote, q { 
quotes: none; 


图 1-34 ”应 用 了 基本 的 重 置 CSS 的 文档 


很 多 人 都 在 用 这 行 代 码 ， 因 为 它 很 简单 。 但 问题 是 该 规则 会 应 用 在 文档 中 的 全 部 元 系 上 , 包 
括 像 文本 输入 框 和 下 拉 选 择 框 这 种 表单 元 素 。 由 于 目前 不 同 浏 览 硕 处 理 表单 元 又 样式 的 方法 不 尽 
相同 (而且 有 一 些 根 本 不 会 应 用 表单 样式 )， 这 种 “全 部 元 素 ”的 方法 就 意味 看 在 减少 浏览 硕 差 
异 时 表单 元 又 的 表现 会 变 得 很 不 一 致 。 

正 因 如 此 ， 才 有 了 更 复杂 一 点 儿 的 重 置 样式 ， 其 中 一 个 比较 流行 的 位 于 meyerweb.comyeric/ 
tools/css/reset， 它 的 开始 部 分 如 下 所 示 : 


CD 互联 网 历史 上 第 一 个 被 普遍 使 用 的 浏览 絮 ， 由 美国 伊利 诺 伊 大 学 的 NCSA 组 织 在 1993 年 发 布 ， 详 情 请 到 维基 百科 
http://en.wikipedia.org/wiki/Mosaic (web browser) fti. 
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html, body, div, span, applet, object, iframe, 
hl, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-size: 100%; 
vertical-align: baseline; 
} 
body { 
line-height: 1; 
} 


IE! 元 素 可 真人 够 多 的 。 之 所 以 这 么 做 是 为 了 选择 除 表 单元 素 (input, select. textarea ) 
之 外 的 所 有 元 系 并 使 它们 表现 一 致 。 第 一 条 规则 明确 地 将 外 边 距 、 内 边 距 、 边 框 和 轮廓 设置 为 0， 
并 且 强 制 将 所 有 的 元 系 设 置 成 同样 的 字 扎 和 相同 的 文本 垂 百 对齐 方式 。 第 二 条 规则 为 bodqy 元 素 
设置 了 一 个 较 小 的 行 遍 ， 这 个 行 高 人 会 被 bodqy 元 素 的 所 有 后 代 元 素 继承 。 

在 meyerweb 的 重 置 样式 中 还 包含 更 多 的 规则 ， 包 括 移 除 列 表 的 项 目 符 号 和 在 blockquote ( X 
引用 ) 标记 和 qz 素 外 侧目 动 生 成 的 引号 的 规则 等 。 再 一 次 地 ， 基 本 目的 还 是 为 了 证 我 们 在 开始 
书写 CSS 之 前 ， 尽 量 使 所 有 的 浏览 器 表 现 一 致 些 ， 同 时 也 证 页 面 好 看 一 些 。 

此 时 你 或 许 会 想 :“ 等 等 ， 这 就 意味 着 我 得 撤销 之 前 的 全 部 工作 ! 我 从 来 也 没 想 让 页 面 有 个 
一 倍 的 行 高 啊 ! SE KJe rY 我 也 不 想 让 垂直 对 齐 把 上 下 标 摘 的 乱七八糟 !7” 

这 些 担 心 都 是 正常 的 , 而 你 需要 做 的 只 是 把 样式 表 按 照 你 的 偏好 进行 修改 。 假设 你 经 党 使 用 
1.4 们 的 行 高 来 使 文学 显得 瑰 沙 有 人 臻 ， 只 需要 修改 重 置 样式 表 中 的 这 一 行 : 


body { 
line-height: 1.4; 


} 
既然 已 经 找到 这 儿 了 ,除了 自己 喜欢 的 字体 , 你 可 能 还 想 为 页 面 添加 一 个 你 喜欢 的 背景 色 和 
统一 的 文本 颜色 : 
body { 
font: smaller/1.4 Helvetica, sans-serif; 


background: #ABACAB; 
color: #444; 


如 有 果 不 想 改变 列表 的 默认 样式 ， 可 以 将 清除 列表 项 目 符 号 的 规则 删除 (但 是 我 没有 这 么 做 ， 
因为 我 们 部 有 不 同 的 知 求 ) 你 还 可 以 继续 添加 精确 定义 列表 的 缩 进 方式 和 缩 进 量 的 规则 、 段 落 
和 列表 项 之 间 的 间距 规则 以 及 你 喜欢 的 加 粗 样 式 等 。 
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至 此 ， 你 拥有 的 已 经 不 是 重 置 样式 表 了 ， 而 是 一 个 重启 样式 表 (reboot style sheet )。 通 过 此 
样式 表 可 以 将 浏览 大 重启 成 你 首选 的 修饰 文档 的 基准 样式 , 在 此 上 自 定义 的 基点 上 可 以 建立 任何 项 
日 。 有 了 这 个 重启 帮 ( rebooter )， 任 何 项 目 都 不 用 重新 开始 了 ， 你 可 以 把 它 作 为 核心 的 样式 并 在 


其 基础 上 编写 最 终 的 样式 表 。 
可 以 很 负责 地 说 ， 你 不 仅 可 以 使 用 CSS 重 启 浏览 絮 样 式 ， 还 可 以 用 JavaScript 来 改良 一 些 浏 
VES 


1.10 IE9.JS 


Dean Edwards 的 IE9.js 可 以 使 IE5 到 IE8 各 版 本 的 浏览 器 在 处 理 CSS 和 HTML 时 更 像 [E9”( 截至 
摧 写 本 书 之 时 IE9 还 没有 发 布 )。 你 可 以 在 code.google.com/p/ie7-js 找 到 它 ， 注 意 这 里 ie7 并 没有 写 
错 ( 如 图 1-35 所 示 )， 因 为 这 个 项 目 是 从 IE7.js 开 始 的 ， 然 后 是 IE8 和 IE9， 新 版 本 是 很 必要 的 。 


eoo ie7-js - Project Hosting on Google Code O 
oom CJD) CGC nio coe google compre s n 
ER 
A JavaScript library to make MSIE behave like a standards-compliant browser. 2 
Project Home Downloads Issues Source | 
Summary | Updates | People 
About Code license: MIT License 


IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant 
browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and 


IE6. 

Status 

Current version: 2.1 beta2. 
Usage 

IE7 js 


Upgrade MSIE5.5-6 to be compatible with MSIE7. 


«1--[if lt IE 7]> 
<script src=" = "net: //ie7-js.googlecode.com/svn/ve 
«1[endif]-- 


on/2.1(beta2)/IE7.js"></s 


Labels: ie7, ie8, ie9, javascript, css, html 


Featured downloads: 
4 ie7-2.1(beta2).zip 
Links: Getting Started 


Examples 
Hotlink 


Blogs: All Blog Posts 


Show all 


Eric Meyer on IE7.js 


The IE6 Equation 
Feeds: Project feeds 


Groups: Google Group 


—— 


IE8.js Project owners: People details 
dean.edward 

Upgrade MSIE5.5-7 to be compatible with MSIE8. DN 

«1--[if lt 8]» 

«scri, pt dos CR //ie7-js.googlecode.com/svn/version/2.1(beta2)/IEB8.js"»«/script» 

1[endif]--» 

You do not need to include IE7.js if you are using IE8.js 
A 

IE9.js t 
Done EIL 


图 1-35 
IE9.js 是 一 个 JavaScript 例 程 集 ， 如 采 浏 览 希 是 IE9 以 下 的 版 本 ， 


IE7.js 页 面 


它 就 会 扫描 页 面 的 CSS 和 和 


HTML, 并 日 计算 出 哪 部 分 是 当前 正版 本 不 支持 的 ， 然 后 它 会 悄悄 地 在 后 台 执 行 一 番 花 哨 灯 页 式 
的 操作 ， 让 浏览 磊 支 持 这 些 原 来 并 不 支持 的 部 分 。 


举 个 例子 ，IE5 和 IE6 不 支持 属性 选择 器 ， 假 设 我 们 有 下 面 这 样 一 条 


a[href] 


规则 : 


(text-decoration: none; color: red; } 


CD 在 翻译 本 文 时 ， 微 软 已 经 发 布 了 IE10 平 台 预 览 


J- 
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IE5 和 IE6 会 完全 忽略 这 条 规则 ， 而 链接 元 素 不 会 有 任何 变化 , 尽管 这 可 能 让 Jakob Neilsen "很 
高 兴 ， 但 是 该 项 目的 设计 者 可 能 就 没 法 给 人 留 下 深刻 印象 了 。IE9.js 花 哨 杂 要 式 的 操作 可 以 确保 
IES 和 IE6 能 够 将 那些 样式 应 用 在 链接 元 率 上 ， 使 它 可 以 正 背 工作 。 你 需要 做 的 只 是 将 IE9.js 链 接 
到 任何 需要 用 到 它 的 页 面 。 

当然 , WRH Y JavaScript ARRERA T, 这 意味 看 需要 权 衔 一 下 ， 比 如 是 否 他 们 大 
部 分 还 在 使 用 IE6， 以 及 他 们 有 没有 可 能 禁用 JavaScript 等 。 当 然 ， 这些 是 我 们 设计 任何 网 站 时 都 
需要 权衡 的 ， 也 算是 轻 车 丈 路 了 。 

通常 的 使 用 建议 是 将 链接 到 JavaScript 文 件 的 script 元 素 用 一 个 条 件 注 释 包 起 来 ， 像 这 样 : 

<!--[if lt IE 9]> 


«script src="/code/TE9.j js" type="text/ javascript"></script> 
<!fendif]--> 


脚本 本 号 会 确保 只 在 需要 的 时 候 才 运行 , 所 以 可 以 省 略 条 件 注释 ,然而 这 人 么 做 的 话 就 意味 着 
不 管 浏览 需 是 否 需要 运行 该 脚本 ,每 位 访问 者 都 会 把 它 完 整地 下 载 下 来 。 而 有 了 条 件 注 释 ， 就 可 
以 确保 只 有 那些 有 可 能 运行 该 脚本 的 浏览 带 才 会 加 载 该 脚本 。 

如 前 所 述 ， 对 于 这 一 脚本 还 有 一 些 早期 的 版 本 ， 它 们 可 以 使 之 前 的 旧版 了 正 提升 到 像 IE7 或 IE8 
那样 ， 如 末 你 觉得 IE9.js 不 能 满足 你 的 需求 ， 那 就 试 试 之 前 的 版 本 吧 。 


CD 权威 的 网 站 可 用 性 顾问 ， 详 见 http:/en.wikipedia.org/wiki/Jakob Nielsen (usability consultant)。 


我 们 能 真切 地 感觉 到 ， 选 择 器 是 CSS 的 核心 部 分 。 如 果 没 有 它们 的 话 ， 我 们 除了 把 属性 般 入 
到 每 个 元 素 里 ， 就 没有 其 他 办 法 能 把 样式 应 用 在 元 素 上 了 ， 那 真是 太 糟 糕 了 。 通 过 选择 絮 赋 予 
的 选择 任何 形式 任何 种 类 元 素 的 能 力 ， 我 们 可 以 只 用 很 少 的 几 行 CSS 完 成 很 大 一 部 分 样式 设置 
工作 。 

本 章 我 们 将 深入 探讨 如 何 巧妙 地 使 用 选择 器 , 并 且 概 述 一 下 哪些 类 型 的 选择 器 被 普遍 支持 且 
应 用 最 为 广泛 。 


2.1 伪 类 与 伪 元 素 


在 CSS 中 有 两 种 “ 伪 ” 字 头 的 选择 融 : 伪 类 ( pseudo-class ) MAJICA ( pseudo-element ), CSS2.1 
中 的 伪 类 有 : 

O :1ink 一 一 未 访问 过 的 链接 ; 
:visited 一 一 访问 过 的 链接 ; 


:hover BBN ek 的 JÓK ; 
: focus 获取 焦点 HIG ; 
:active— BUA CIA — A a ERO A ); 


:first-child 一 一 作为 其 他 元 素 第 一 个 子 元 素 的 元 系 ; 
: lang () 一 一 根据 元 系 的 lang 属 性 确定 的 元 素 。 

CSS2.1 中 的 伪 元 素 有 : 

L] ::first-line 

L] ::first-letter 

LI ::before 

L] ::after 

那么 区 别 在 哪儿 呢 ? Ka E ie Ley ac n s MCS TT 3 AP TA]. THR AUR LRG 
OUETUSJIIZS , WTA TORR HY BOR I BAT ICR TA Bl TOES PF 

以 : :first-letter 为 例 , 假设 你 要 把 每 个 h1 的 第 一 个 字母 增 大 到 其 他 字母 的 两 倍 半 ( 如 图 
2-1 所 示 )， 很 简单 : 


n 
n 
n 
n 
n 
n 


hi::first-letter (font-size: 250%;} 
这 就 仿佛 CSS 和 标记 被 修改 成 了 这 样 : 
hi first-letter (font-size: 250%;} 


<hi><first-letter>H</first-letter>owdy, y'all!«/h1» 


| y'all! I’m just so darned excited! 


图 2-1 放大 hi 的 第 一 个 字母 


这 真 的 是 浏览 磊 内 部 真实 发 生 的 情况 吗 ” 谁 知道 呢 , 反正 结果 确实 像 是 发 生 了 这 种 情况 ， 因 
此 才 有 了 “人 擅 元 素 ” 这 个 名 字 。 

类 似 地 ， 伪 类 的 表现 就 像 是 它们 使 文档 中 的 元 素 被 添加 了 新 的 类 。 例 如 ,想象 一 下 奋 对 于 每 
一 个 作为 其 他 元 素 第 一 个 子 元 素 的 元 素 , 浏览 絮 给 它们 都 附加 了 一 个 名 为 first-child 的 类 , 然 
后 就 可 以 像 下 面 这 样 为 它们 应 用 样式 了 : 

li.first-child {border-left: none; } 

只 需要 简单 地 把 点 改 成 冒号 就 变 成 了 1i:first-chil1d4， 就 可 以 得 到 同样 的 最 终 效 果 ， 而 不 
用 费力 把 类 添加 到 所 有 标记 上 。 

有 时 还 会 看 到 伪 元 素 使 用 双 骨 号 的 语法 , 这 是 在 CSS2.1 之 后 引入 的 。 截 至 撰写 本 书 之 时 ， 还 
没有 哪个 浏览 右 要 求 你 必须 在 伪 元 素 前 面 使 用 双 冒 号 的 ， 一 个 冒号 就 可 以 了 。 

男 外 提醒 读者 ，CSS3 增 加 了 如 下 一 些 伪 类 ， 截至 撰写 本 书 之 时 ， 它 们 中 的 大 部 分 还 没有 被 
广泛 地 支持 : 


Q :target 


OO 
:nth-child() 
:nth-of-type() 
:nth-last-of-type() 
:first-of-type 
:last-of-type 
:only-of-type 
:only-child 
:last-child 
:empty 

not t) 


DUUWOOUKDUDOOLUOUOD 
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L] : enabled 
L] :disabled 
ü : checked 


2.2 为 = 标 元 素 添 加 样式 


当 希 望 指向 文档 中 的 某 个 片段 时 ， 目 标 ( target ) 会 非 党 有用。 什么， 怎么 实现 ? 其 实 非 党 
简单 

< href="http://example.com/law.html#sec2-7">Section 2.7</a> 

任何 人 单 击 这 个 链接 ( 如 果 浏览 器 处 理 正 确 的 话 REC LEBERERI EARI, mT FLIRT THR 
中 文档 片段 标识 符 ( 地址 中 的 #sec2-7 部 分 ) 出 现 的 地 方 。 这 有 时 是 通过 错 点 (anchor ) 实现 的 ， 
但 是 只 用 1D 来 实现 会 更 好 一 些 。 例 如 有 如 下 两 种 场景 


<h3><a name="sec2-7">Exceptions</a></h3> 
<h3 id="sec2-7">Exceptions</h3> 


这 两 种 情况 下 ， 当 浏览 兹 跳 到 了 文档 中 的 目标 位 置 时 , 都 不 会 有 任何 视觉 提示 告知 你 已 经 到 
达 了 目标 位 置 ， 而 使 用 :target 伪 类 就 可 以 给 出 视 党 提示。 例如 ， 知 想 让 作为 某 个 文档 片段 标识 
符 目标 的 h3 拥 有 特定 的 提示 效果 (C 如 图 2-2 所 示 )， 可 以 这 样 写 : 


h3:target {color: maroon; 
background: #FFA; } 


You'll have to do this for every page, of course, but it's easier to add the LINK tags than it is to re-enter the same style sheet for every page, 
right? Plus if you ever decide to change the styles, you only edit general.css, and the entire server reflects the change. Now that's power. 


Of course, you may have some pages which require some changes to your general styles. For example, let's say that your help page-- you 
do have a help page, right?-- should have a navy sidebar instead of an olive sidebar. No problem! Just throw a style sheet into the HEAD of 
the document: 
<STYLE type="text/css"> 

-Sidebar (background-color: navy;} 


</STYLE> 


The cascade order defined in the specification will cause the sidebar to have a navy background on this document, because declarations 
found in the document itself take precedence over those which are imported from other files. 


Let's take that one step further. Suppose you have a whole series of help pages, all of which need navy sidebars. You don't really want to 


have to put a one-declaration style sheet in every one of them, do you? Of course not. In that case, create a new .css file, such as 
help.css. This file might contain: 


.sidebar (background-color: navy;} 
-Sidebar UL LI A (color: #CC9999;} 
«body (background: white no-repeat center 
url (http://www.mysite.org/pix/help.gif);} 


This file is a reduced set of instructions from general.css, with some of the values changed. Now, in order to use it, you could éimport it 
into each help page: 
<STYLE type="text/css"> 


@import (http://www.mysite.org/styles/help.css); 
</STYLE> 


The browser will import the styles from help.css and use them-- if you place the command correctly. Again, the cascade order comes into 
play. If you are importing styles from multiple files, and some of them are set on the same elements, then the later commands take 
precedence over the first ones. In other words, the closer an @import command is to the Bopy, the more important it is. 


Actually, in order to make sure of this, you might want to @import all of your styles, and not use LINK at all. In order words, a help page 
would have the following style sheet: 


图 2-2 ”突出 显示 目标 元 又 〈( 另 见 彩 插图 2-2 ) 
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当然 ， 你 或 许 想 把 这 个 样式 应 用 到 任何 目标 元 素 上 ， 而 不 管 它 是 什么 元 系 , 那么 上 只 需要 把 h3 
换 成 一 个 通用 选择 囊 即 可 ， 驶 像 这 样 : 


*:target {color: maroon; 
background: #FFA;} 


MBAR EG, ORME Piu icra tie wey, PTFE See ae fn] 3.53 : target. 

如 有 条 想 让 目标 样式 多 一 点 Web 2.0H aim, RAT LA EL— T aT Se ACR. PRT, Ble 
那 种 “你 已 经 完成 了 某 项 操作 , 所 以 页 面 上 的 一 坎 育 景 会 从 黄色 变 到 日 色 ， 让 你 知道 已 经 完成 了 
该 项 操作 ”的 效果 。 通 过 :target 和 一 个 动画 GIF 可 以 很 容易 地 实现 这 种 效果 ， 只 需要 创建 一 个 
从 黄色 渐变 到 日 色 ( 如 末日 色 是 你 网 站 的 背景 色 的 话 ) 的 动画 并 且 把 它 当 做 背景 图 像 。 


*:target {background: url(/pix/yellow-fade.gif) ;} 


2.3 特殊 性 


你 很 难 快速 地 把 特殊 性 (specificity ) 这 个 词 读 3 遍 ， 而 若 想 彻底 地 掌握 它 甚至 更 难 。 但 是 ， 
它 却 是 理解 CSS 规 则 之 间 相 互 作用 的 关键 。 

特殊 性 是 一 个 选择 需 “ 特 殊 程 度 ” 的 数字 表示 ,， 有 3 样 东 西 经 党 被 用 来 确定 选择 需 的 特殊 性 : 

O 每 个 元 素描 述 符 贡 献 0,0,0,1; 

OQ 每 个 类 、 伪 类 或 者 属性 描述 符 贡 献 0,0,1,0; 

OQ 每 个 ID 摘 述 符 贡 献 0,1,0,0。 

先 不 要 抓 狂 ， 来 看 几 个 小 例子 。 


div ul ul li 0,0,0,4 4 个 元 素描 述 符 

div.aside ul li 0,0,1,3 1 个 类 描述 符 ，3 个 元 素描 述 符 

a:hover 0,0,1,1 1 个 伪 类 摘 述 符 ，!1 个 元 素描 述 符 
div.navlinks a:hover 0,0,2,2 1 个 伪 类 描述 符 ，1 个 类 描述 符 ，2 个 元 素描 述 符 
#title em 0,1,0,1 1 个 ID 描 述 符 ，1 个 元 素描 述 符 

hi#title em 0,1,0,2 1 个 ID 描述 符 ，2 个 元 素描 述 符 


布 望 这 些 能 够 帮助 你 理解 特殊 性 是 如 何 计算 的 。 那 么 ， 为 什么 是 逗号 呢 ? 因为 可 以 这 么 说 ， 
每 个 “级 别 ”的 特殊 性 的 值 郡 是 相互 独立 的 。 因 此 ， 有 具有 一 个 单独 的 类 描述 符 的 选择 融会 比 由 13 
个 元 系 描 述 符 组 成 的 选择 融 拥 有 更 高 的 特殊 性 。 


.aside /* 0,0,1,0 */ 
div table tbody tr td div ul li ol li ul li pre /* 0,0,0,13 */ 


第 一 个 选择 器 左 数 第 三 位 的 “1” 胜 过 了 第 二 个 选择 器 同样 位 置 的 “0”， 基 于 这 样 的 事实 ， 
第 二 个 选择 融 第 四 位 的 “13”( 在 这 个 非常 有 限 的 例子 中 ) 就 蝶 无 意义 了 。 过 号 可 以 使 我 们 看 得 
更 清楚 ， 否 则 选择 器 的 特殊 性 可 能 被 写成 “10” 和 “13”， 从 而 造成 后 者 特殊 性 更 高 的 假象 (在 
CSS 的 早期 还 没有 引入 如 号 分 阳 符 时 ， 这 是 经 常 出 现 的 误解 )。 
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还 有 夯 外 一 种 帝 见 的 误解 ， 就 是 特殊 性 的 结构 相近 问题 。 例 如 ， 假 必 有 如 下 两 个 选择 胡 : 


ul li {font-style: normal;]j 
html li {font-style: italic; } 


f 124 PIT es nC? 它们 都 有 两 个 元 系 描述 符 , 这 意味 看 它们 的 特殊 性 都 是 0,0,0,2。 其实， 
后 写 的 会 屎 ， 与 html1 元 系 相 比 ul 元 系 在 文档 中 的 位 置 离 11 元 素 更 近 也 不 管用 。 特 殊 性 只 是 单纯 
的 数值 ， 它 不 会 以 任何 方式 评估 页 面 的 结构 。 结 末 ,， 列 表 元 素 将 全 部 变 成 料 体 ， 因 为 当 特 丈 性 相 
等 时 后 声明 的 规则 会 胜出 。 

因为 我 说 过 有 3 样 东西 影响 特殊 性 ， 所 以 你 或 许 想 知 逢 特殊 性 标识 符 第 一 位 的 0 是 干 嘛 用 的 。 
其 实 ， 第 一 个 0 是 用 于 行内 样式 ( inline style) 的 ， 且 仅 用 于 行内 样式 。 因 此 ， 如 末 有 下 面 这 样 的 
样式 和 标记 ， 则 aiv 的 背景 将 会 是 蓝 色 。 


diviheader {background: purple;) /* 0,1,0,0 */ 


«div id="header" style="background: blue;"» <!-- 1,0,0,0 --> 
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有 一 样 东 西 是 可 以 无 视 特殊 性 的 ， 那 就 是 !important。 如 果 你 是 一 名 程序 员 的 话 ， 我 现在 
就 要 打消 你 的 错误 想法 一 一 !important 不 代表 “不 重要 ”"， 

可 以 使 用 !important 把 任何 单独 的 声明 标记 为 重要 。 下 面 是 一 个 简单 的 例子 : 

a:hover (color: red !important; text-decoration: none;} 

在 这 个 例子 中 color: red 被 标记 为 重要 ， 但 是 text-decoration: none 没 有 。 任何 你 想 
标记 为 重要 的 声明 都 需要 有 目 己 的 !important。 

基本 上 ,任何 重要 的 声明 都 会 履 善 非 重要 的 声明 。 好 了 ， 就 此 打住 吧 。 使 用 下 面 的 代码 ， 结 
条 将 会 得 到 一 个 绿色 的 链接 : 


div#gohome a#home (color: red; } 


div a {color: green !important; } 


<div id="gohome"><a id="home" href="/">Home</a></div> 
BP SUE TE ES PAE (0,2,0,2) 对 于 解决 颜色 冲突 没有 任何 作用 ， 因 为 :important 
可 以 胜 过 它 。 
当然 ， 如 果 我 们 为 第 一 条 规则 也 添加 一 个 重要 标志 ， 那 么 情况 就 不 同 了 。 


div#tgohome a#home (color: red !important; } 


div a {color: green !important; } 

由 于 两 个 颜色 声明 都 是 重要 的 ， TU ORIEN UU RSS, PRT, RRERTE 
又 起 作用 了 ， 所 以 链接 会 变 成 红色 。 

这 提醒 我 们 使 用 !important 时 要 非常 小 心 ， 因 为 一 旦 开始 用 它 履 盖 其 他 规则 ， 很 快 你 就 会 


OD 多 数 编 程 语言 里 叹 号 都 有 取 和 否定 的 意思 ， 所 以 作者 说 !important 并 不 是 不 重要 。 


i 


v 
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发 现 必须 再 用 男 外 的 !important 窗 盖 这 条 重要 的 规则 ， 因 此 就 必须 再 引入 一 个 !important 声 
明 ， 最 终 会 把 所 有 的 声明 都 变 成 重要 的 ， 也 就 意味 着 最 终 没 有 一 个 规则 是 重要 的 。 


2.5 ”省 略 人 简写 属性 值 的 关键 词 时 会 发 生 什么 


我 们 都 知道 CSS 中 有 很 多 简写 属性 ， 其 中 background、border、font、margin 和 和 padding 
是 几 个 最 常用 的 ,这 是 一 次 表达 一 堆 信 息 的 高 效 而 简洁 的 方式 。 但 是 ， 当 省 略 了 属性 值 中 的 某 些 
部 分 时 会 发 生 什 么 呢 ? 考虑 下 面 的 代码 : 

strong {font: bold italic small-caps medium/1.2 Verdana, sans-serif;} 

如 图 2-3 所 示 ， 这 会 对 strong 元 素 应 用 1.2 倍 行 高 且 字 体 为 粗 斜 体 、 中 等 字号 、 小 型 大 写字 母 
( small-caps® medium-size ) 的 Verdana (或 者 其 他 sans-serif 字 体 族 ”的 字体 ) 样式 。 


SuperMuscleGro Works! 


Home Science Magic Contact 


SuperMuscleGro made me THE STRONGEST MAN ON THE BLOCK! Now I 
other position. Try it today! 


Scientifically Proven! 


2-3 JEH strong 
假设 我 们 缩减 一 下 这 个 属性 值 : 


strong (font: medium Verdana, sans-serif; } 
MA I EA EA) E LEY Verdana FIE ( 如 果 Verdana 字 体 不 可 用 的 话 就 是 其 他 的 
sans-serif 字 体 )， 而 粗 体 的 效果 消失 了 ， 如 图 2-4 所 示 。 


SuperMuscleGro Works! 


Home Science Magic Contact 


SuperMuscleGro made me the strongest man on the block! Now I 
position. Try it today! 


Scientifically Proven! 


Scientists have long studied the various ingredients found in SuperMuscle 
growing lifestyle. 


图 2-4 ARA f DCH 
原因 是 当 省 略 了 部 分 简写 属性 值 的 时 候 , 缺失 的 部 分 就 会 使 用 该 属性 的 默认 值 。 因 此 ， 当 省 


QQ 小 型 大 写字 母 ， 参 见 http://en.wikipedia.org/wiki/Small caps. 
D 无 衬 线 字 体 ， 参 见 http:Wen.wikipedia.org/wiki/Sans-serif。 
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略 了 字体 粗细 ( font-weight )、 字体 样式 ( font-style ) 和 字体 异体 ( font-variant ) 时 , 
实际 相当 于 这 样 : 

strong {font: normal normal normal small/normal Verdana, sans-serif; } 

ÆR, BUGEAT line-height t@A PUA, BARU BI LU s FEM AER ATT FS [HL o 

如 果 设置 样式 的 时 候 不 小 心 ， 就 可 能 会 出 现 类 似 的 问题 。 考 虑 下 面 两 条 规则 ， 第 一 条 来 目 于 
全 站 的 样式 表 ， 而 第 二 条 来 目 于 某 个 页 面 的 通信 样式 。 

body {background: #FCC url(/i/pagebg.gif) 10px 25% no-repeat fixed; } 

body {background: url(i/body-bg.gif) ;} 

在 这 两 条 规则 的 作用 下 , 这 里 讨论 的 页 面 会 有 一 个 新 的 从 左上 角 开 始 的 背景 图 像 ,， 且 当 页 面 
深 动 时 会 随 者 页 面 深 动 。 这 是 因为 第 二 条 规则 实际 上 等 价 于 : 

body (background: transparent url(i/body-bg.gif) 0 0 repeat scroll;} 

现在 ,如 末 这 确实 是 想 要 的 效果 ,那么 你 可 以 这 么 做 , 但 它 的 目的 似乎 更 像 是 要 把 图 片 换 成 
为 外 的 图 片 。 其 实在 这 种 情况 下 ， 你 只 需要 设置 特定 的 属性 ， 像 这 样 : 

body {background-image: url(i/body-bg.gif);) 

总 之 ， 这 是 大 部 分 简写 属性 的 工作 方式 。 不 过 ， 也 有 一 些 例外 的 ， 如 margin、padqding、 
border-style, border-widthf#llborder-color“#, 省 略 这 些 属性 的 值 ， 25 就 像 是 从 已 给 出 
的 值 “复制 ”了 一 份 。 下 面 有 几 个 功能 相同 的 声明 : 


margin: lem; margin: lem lem lem lem; 
padding: 10px 25px; padding: 10px 25px 10px 25px; 
border-color: red green blue; border-color: red green blue green; 


当然 ， 这些 值 的 顺序 还 是 上 右 下 左 〈Top-Right-Bottom-Left )， 可 以 人 简 记 为 TRBL， 这 可 以 免 
除 你 “ 记 不 住 ”这 一 麻烦 〈TRouBLe ). 


2.6 ”选择 性 地 禾苗 简写 属性 


虽然 简写 属性 会 用 默认 值 覆 冀 霖 声明 的 部 分 , 但 这 并 不 意味 春 我 们 需要 避免 这 种 情况 。 实 际 
上 ， 你 可 以 用 徐 写 属性 声明 80%， 人 然后 在 羽 一 处 通过 获 希 实现 娘 外 20%。 

假设 你 想 实现 一 个 具有 3 px 的 点 线 边 框 ， 其 中 3 条 边 是 黑色 ， 而 第 四 条 边 是 红色 ( 如 图 2-5 所 
示 )， 可 以 每 次 都 号 一 个 边 ， 但 是 那样 要 多 项 很 多 次 键盘 。 所 以 可 以 像 下 面 这 样 声明 : 


border: 3px dotted black; 
border-left-color: red; 


OE, BE A iis VRA eB oP HER HU pA AS [819308 75. VG BY DAA TRE BASIL] SZ Be 
更 好 的 效果 。 

再 举 一 个 第 见 的 选择 性 履 六 人 简写 属性 的 例子 。 注意 , 标题 元 系 可 能 除了 字号 以 外 大 部 分 属性 
痢 相 同 。 如 果 你 对 训 览 天 殉 认 的 字 所 很 满意 的 话 ， 就 可 以 二 接 这 么 写 了 : 


—Á Works! 


SuperMuscleGro made me the strongest man on the block! Now I do 
position. Try it today! 


Scientifically Proven! 


Scientists have long studied the various ingredients found in SuperMusc 
growing lifestyle. 


图 2-5 ”把 一 侧 的 边 变 成 红色 (为 见 彩 择 图 2-5 ) 


h1, h2, h3, h4, h5, h6 {font-weight: normal; 
font-style: italic; 

font-family: Helvetica, sans-serif; 
line-height: 1.5;} 


另 一 方面 ， 如 果 想 设置 目 己 的 标题 字号 ， 如 图 2-6 所 示 ， 则 需要 换个 思 


h1, h2, h3, h4, h5, h6 (font: italic 100%/1.5 Helvetica, sans-serif; } 
hi (font-size: 225$;] 

h2 (font-size: 185$;)] 

h3 (font-size: 140$;) 

/* i * / 


SuperMuscleGro made me the strongest man on the block! Now I don't have to take abuse sitting down, lying down, or in any other 
position. Try it today! 


Scientifically Proven! 


Scientists have long studied the various ingredients found in SuperMuscleGro and have shown that they each can help support a healthy, 
growing lifestyle. 


Packed With Nutrimins! 


Our SuperMuscleGro formula helps to support your physical development thanks to its unique blend of nutrients and vitamins. 
SuperMuscleGro's combination of essential nutrients and organic extracts work to promote a context for personal growth and increased 
muscle density. 


Loaded With Anti-Oximega-4! 


Anti-Oximega-4 is our proprietary mixture of mineral and vegetable essences. Our secret, scientifical blend of ingredients provides beneficial 
assistance to your body's core systems. It blocks the adsorption of excess fatty acids and spares muscular cells from being oxidized in 
damaging ways. 
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当 使 用 这 种 选择 性 覆 关 时 , 最 好 确保 用 来 窗 痢 简写 属性 的 属性 出 现在 简写 属性 之 后 。 只 有 通 
过 这 种 方式 ， 当 选择 瘟 具 有 相同 的 特殊 性 时 ( 这 也 是 经 党 出 现 的 情况 )， 用 来 履 计 人 简写 属性 的 属 
性 才能 胜 过 相应 的 简写 属性 。 


2.7 通用 选择 


本 市 我 将 介绍 一 下 选择 融 中 星 写 (* ) 的 使 用 ， 先 别 太 兴 奋 ， 它 并 不 是 你 想象 中 的 万 能 
下 面 是 一 个 简单 的 例子 : 

* {color: blue? } 

IAN AES Pg ae ea, AE PE a PE HI ee PE CS P Se Be I a FES 

这 看 起 来 像 是 一 个 通配符 , 而 且 在 某 种 情况 下 确实 是 , 因为 你 可 以 用 它 选 择 一 大 堆 元 素 而 无 
需 给 它们 命名 。 假 设 我 想 选择 这 个 aiv 中 的 全 部 元 系 : 


<div> 

<h1l>Hey-ho!</h1> 

<p>I’m a <em>paragraph</em>.</p> 
<ol> 

<li>Uno</li> 

<li>Deux</li> 

<li>Drei</li> 

</ol> 

</div> 


就 这 么 简单 : 

div * {border: 1px solid red; } 

结果 跟 这 样 写 的 效果 是 一 样 的 : 

div h1, div p, div em, div ol, div li {border: 1px solid red;l 

好 吧 ， 应 该 说 是 儿 乎 一 模 一 样 。 如 图 2-7 所 示 ， 视 觉 效 果 是 一 样 的 ， 但 是 还 有 一 个 非常 轻微 
的 不 同 , 那 就 是 它们 的 特殊 性 。 你 可 以 看 到 , 通用 选择 需 的 特殊 性 贡献 为 0,0,0,0, 这 意味 着 div * 
的 特殊 性 为 0,0,0,1， 而 div h1〈 还 有 这 一 组 里 的 其 他 选择 融 ) 的 特殊 性 为 0,0,0,2。 除 了 这 个 ， 绪 
采 是 一 样 的 。 


图 2-7 把 giv 的 所 有 后 代 加 上 红 框 (为 见 彩 插图 2-7 ) 


许 以 为 可 以 用 hx* 来 代替 h1、h2、h3、h4、h5、h6， 但 是 对 不 起 ， 不 行 。 就 像 前 面 展示 
能 把 它 作为 一 个 元 素 通配符 ， 这 就 是 它 的 全 部 功能 


Sm 
m OX 
+> 
=] 


IEM AY Pe BB Me: 我 该 用 类 (class ) 还 是 ID 呢 ? 

WRT PMT SRE, NA AeA AS, PA TTA PE ER SE e 
简单 的 答案 是 : 对 于 任何 在 页 面 中 可 能 出 现 不 止 一 次 的 “标签 ”使 用 类 ， 对 于 任何 只 出 现 一 次 的 
使 用 ID。 这 里 所 谓 的 “标签 ”, 指 的 是 一 个 附加 到 元 素 上 的 描述 性 词汇 。 实 际 上 , 类 和 ID 有 99.44% 
的 可 能 性 被 用 在 摘 述 元 系 上 。 

使 用 ID 值 的 两 个 经 典 例子 是 页 头 ( header ) 和 页 脚 (footer )， 前 提 是 任何 给 定 页 面 都 只 有 
一 个 页 头 和 一 个 页 脚 。 类 值 的 应 用 就 比较 分 散 了 ,比如 可 以 用 more 表 示 “ 详 细 信 息 ” 链接 , Hjtabs 
表示 一 组 导航 选项 卡 ， 或 者 用 odd 表 示 奇 数 表格 行 。 

至 于 那个 更 复杂 的 答案 就 不 仪 要 权衡 标签 是 否 在 页 面 中 唯一 了 ,还 要 考虑 到 ID 和 类 对 特殊 性 
的 影响 。 由 于 包含 ID 的 选择 融 比 那些 只 包含 类 的 选择 需 具 有 更 高 的 特 丈 性, 因此 你 可 能 会 无 法 履 
盖 某 个 特定 规则 。 

这 里 有 个 简单 的 例子 ， 假 疫 你 已 经 在 全 站 样式 表 中 写 过 如 下 规则 : 


#header (background: black; } 
#header a (color: white; } 


然后 你 又 决定 让 联系 信息 页 面 不 要 那么 严肃 , 所 以 想 把 页 头 设置 成 浅 灰 色 , 并 让 所 有 的 导航 
链接 有 一 个 舒 绥 的 瞳 绿 色 样 式 。 由 于 该 联系 信息 页 面 有 几 组 不 同 的 导航 链接 ， 所 以 你 会 这 么 写 : 


#header {background: #BBB; } 
.navlinks a {color: #257000; } 


IRER, 如 图 2-8 所 示 ，, 因为 #header a 具有 更 局 的 特殊 性 , 所 以 页 头 的 导航 链接 仍然 是 白色 。 


| 


SuperMuscleGro Works! 


SuperMuscleGro made me the strongest man on the block! Now I don't hav 
position. Try it today! 


Scientifically Proven! 


Scientists have long studied the various ingredients found in SuperMuscleG 
growing lifestyle. 


图 2-8 ”页 头 坚 无 吸引 力 的 链接 
对 于 这 个 问题 ， 可 以 这 样 来 解决 : 


#header a, .navlinks a (color: #257000; } 
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#header .navlinks a, .navlinks a (color: #257000; } 

PRET SAB ATL, ANIDUÉDEOEH LAS, AIRE? (虽然 不 如 往 .navlinks a Eft 
Ñ! importanti ZA 4E, AIBA E3JLA s ) 另外 一 个 处 理 这 种 情况 的 方法 是 将 包含 ID 的 页 头 标签 
里 面 的 id 换 成 类 ， 即 . 

<div class="header"> 

此 处 的 class="header" 原 来 是 id="header"。 这 样 就 不 用 太 担 心 ID 弄 出 来 的 那些 很 难 搞 的 
特殊 性 冲突 问题 了 。 也 就 是 说 ， 在 你 的 全 站 样式 表 中 这 人 么 写 : 


.header {background: black; } 
.header a (color: white;} 


然后 在 联系 信息 页 面 的 样式 表 中 这 么 写 : 


.header {background: #BBB; } 
ciavlinks a {colors #2570007) 


最 终结 果 就 是 深 亮 的 绿色 文字 链接 ， 如 图 2-9 所 示 。 


SuperMuscleGro Works! 


Home Science Magic Contact 


SuperMuscleGro made me the strongest man on the block! Now I don't have 
position. Try it today! 


Scientifically Proven! 


Scientists have long studied the various ingredients found in SuperMuscleGro 
growing lifestyle. 


图 2-9 ”页 头 引 人 注目 的 链接 ( 男 见 彩 插图 2-9 ) 


这 就 是 全 部 需要 做 的 工作 了 ， 所 以 ， 这 是 为 大 部 分 或 者 全 部 标签 部 应 用 类 的 一 个 好 理由 。 

为 外 一 个 理由 是 ， 你 没 法 确定 什么 时 候 标签 会 从 一 个 变 成 多 个 。 页 涉 ( header ) 就 是 个 最 好 
的 例子 ， 因 为 一 个 页 面 中 可 能 有 多 个 “页 涉 ”。 如 果 和 觉得 奇怪 的 话 ， 想 想 新 闻 网 站 或 者 其 他 门户 
网 站 , 每 个 部 分 和 侧 栏 框 都 会 有 目 己 的 “页 头 ”, 并 且 页 脚 也 一 样 。 因此 一 吐 地 使 用 类 就 很 合理 了 。 

现在 ,你 或 许 会 争 辩 说 那些 并 不 是 一 个 页 面 上 真正 的 页 头 和 页 脚 , 它们 只 是 标题 和 其 他 附加 
言 息 或 者 诸如 此 类 的 内 容 。 其 实 这 是 个 语义 问题 ,是 没 法 明确 解决 的 ， 比 如 你 称 为 首 行 的 ,我 可 
能 叫 它 头 部 。 关 键 是 你 用 于 网 页 的 唯一 标签 有 天 一 日 可 能 变 得 不 再 唯一 。 避 免 这 种 情况 发 生 的 最 
好 办 法 就 是 一 开始 就 全 部 使 用 类 。 

那么 有 没有 什么 用 得 春 卫 的 地 方 呢 ? 当然 可 以 有 。 总 会 有 一 些 情 况 下 , 你 可 以 确定 某 个 元 系 
在 页 面 中 是 唯一 的 , 并 且 永 远 不 会 重复 。 还 有 一 些 情 况 下 ,你 希望 用 ID 给 选择 带 赋 子 更 高 的 特殊 
性 ， 以 便 轻 松 地 使 它 胜 过 其 他 选择 从。 并 且 ID 对 于 脚本 编程 、 链 接 目 标 和 其 他 CSS 之 外 的 东西 部 
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至 关 重 要 ， 你 只 需要 在 书写 CSS 时 小 心 一 点 儿 就 是 了 。 
还 有 男 外 一 种 可 以 使 用 ID 且 不 用 担心 特殊 性 问题 的 方法 ， 我 们 在 2.13 节 介绍 。 


29 ID 与 类 共用 


偶尔 可 能 会 有 这 样 的 情况 ， 有 一 个 唯一 的 元 素 并 且 它 还 是 一 大 类 元 素 中 的 一 分 于 。 例 如, 假 
设 站 点 侧 边栏 中 有 一 堆 小 面板 ,每 个 面板 都 有 一 个 框 并 且 具 有 特定 的 颜色 和 字体 , 但 是 每 个 面板 
禾 有 独特 的 地 方 ， 比 如 每 个 和 那 有 不 同 的 背景 图 等 。 

在 这 种 情况 下 可 以 给 元 条 同时 应 用 类 和 ID， 就 像 这 样 : 


<div class="panel" id="weather"> 
<div class="panel" id="stocks"> 
<div class="panel" id="latest"> 


然后 ， 在 CSS 里 就 可 以 按 需 处 理 了 。 


.panel { 

border: lpx solid silver; 

background: #EEE top left no-repeat; 

color: #333; 

font: x-small sans-serif; } 
#weather { 

background-image: url(/pix/panel-weather.jpg) ;} 
#stocks { 

background-image: url(/pix/panel-stocks.jpg) ;} 
#latest { 

background-image: url(/pix/panel-latest.jpg) ;} 


OE E WEE PA a Ai, ROE: 


.panel#weather {font-weight: bold; } 
#latest.panel (color: #511; } 


Bin, EMM BS PIA, ADR IWEHTML'P HI SY IRB « 


2.10 多 类 


元 素 的 class 属 性 有 个 经 稼 被 忽略 的 能 力 ， 就 是 你 可 以 用 任意 多 的 词组 成 一 个 由 空格 分 隅 的 
列表 ， 将 其 作为 该 属性 的 值 。 换 句 话 说， 就 是 你 可 以 给 元 素 应 用 多 个 类 。 
作为 例子 ， 我 们 继续 使 用 之 前 的 标记 并 把 它 改 成 不 使 用 iq 属 性 的 状态 : 


<div class="panel weather"> 


<div class="panel stocks"> 
<div class="panel latest"> 


SR at Hs 22 Ve] CSS PELE AB WT FSS CID AY TOL : 


.panel { 
border: 1px solid silver; 
background: #EEE top left no-repeat; 
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color: #333; 

font: x-small sans-serif; } 
.weather { 

background-image: url(/pix/panel-weather.jpg) ;} 
.Stocks { 

background-image: url(/pix/panel-stocks.jpg) ; } 
.latest { 

background-image: url(/pix/panel-latest.jpg) ;} 


.panel.weather {font-weight: bold; } 
Latest. panel {color: #511;} 


类 在 HIML 源 代码 中 的 书写 顺序 与 在 样式 表 中 的 书写 顺序 无 大， 即 .panel .weather 的 效 采 
跟 .weather .panel 的 效果 是 一 样 的 ， 并 且 无 论 这 两 个 类 在 HTML 源 代码 中 的 书写 顺序 如 何 ， 特 
殊 性 也 都 是 一 样 的 。 它 们 在 源 代码 中 是 否 被 其 他 类 名 分 隔 开 也 是 无 天 么 要 的 ， 比 如 : 

<div class="weather alert tornado watch panel"> 

此 时 通过 . panel. weather 和 .weather. panel 都 可 以 选 中 该 元 又 

有 个 正在 慢 慢 被 忽略 的 注意 事项 ": IE6 及 早期 版 本 不 识别 样式 表 中 多 个 类 的 写法 ， 当 使 
用 .panel .weather 时 ，IE6 只 会 识别 成 .weather。 尺 管 在 HTML 中 仍然 可 以 使 用 多 个 类 ， 并 日 
可 以 在 CSS 中 定位 这 些 类 ,但 是 每 次 只 能 使 用 一 个 类 。 因 此 ，.weather 和 .panel 痢 可 以 在 IE6 
下 很 好 地 匹配 之 前 例子 中 的 标记 , 只 是 IE6 会 假定 .weather .panel 给 元 素 应 用 了 一 个 包 仿 panel 
这 个 词 的 类 ， 这 可 能 并 不 是 你 想 要 的 结 
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属性 选择 需 是 CSS2 中 引入 的 并 且 在 CSS3 中 得 到 了 扩展 ， 堆 至 撰写 本 书 之 时 已 经 得 到 所 有 主 
流 浏 览 大 的 支持 〈IE6 除 外 ， 如 果 这 对 你 来 说 是 个 问题 的 话 ， 人 参见 1.10 节 )。 

最 基本 的 思路 就 是 可 以 通过 元 素 已 有 的 属性 选择 元 素 , 或 者 基于 元 素 属 性 值 的 某 个 方面 进行 
选择 。 因 此 ， 你 可 以 选择 所 有 确实 是 链接 的 a 元 素 ， 像 这 样 : 

a[href] 

该 选择 天 会 选择 所 有 含有 href 属 性 的 a 元 素 , 不 会 选择 没有 href 属 性 的 a 元 素 , 命名 销 点 ( 例 
如 <a name="top">) 就 是 最 明显 的 例子 。 它 基本 上 是 a:1ink,，a:visitegd 的 一 个 简化 版 。 例 如 
LH: 

a[href] (color: green;) 

则 页 面 将 会 如 图 2-10 所 示 。 

至 于 href 的 属性 值 是 什么 一 点 都 不 重要 ， 实 际 上 甚至 连 属性 值 是 否 为 合法 的 URI (Uniform 
Resource Identiffer ， 统 一 资源 标识 符 ) 或 其 他 资源 都 无 天 紧要 。 选 择 <a href="#"> 和 选择 
«a href="http://w3.org/"> 的 方式 完全 相同 。 


CD 虽然 国外 可 以 慢 慢 不 去 顾及 IE6， 但 是 在 国内 仍然 是 个 标准 的 注意 事项 。 


Further Resources 
Home Abstract Proposal Summary Further Resources Contact 


Here are some links for further reading on this and relate topics. 


。 WHAT-WG 
e W3C 
e HTMLS Doctor 


图 2-10 ”通过 属性 选择 器 选择 链接 元 素 
现在 ， 如 末 想 选择 指 回 茶 个 特定 地 址 的 全 部 超 链 接 该 怎么 做 呢 ? 寿 想 入选 出 一 个 特定 的 
URI， 只 需要 这 么 做 ( 如 图 2-11 所 示 ): 


a[href-"http://w3.org/"] {font-style: italic;j 


Further Resources 


Home Abstract Proposal Summary Further Resources Contact 


Here are some links for further reading on this and relate topics. 


e WHAT-WG 
e W3C 
。 HTMLS Doctor 


图 2-11 通过 属性 选择 侣 选择 具有 特定 URL 的 链接 元 系 


该 选择 器 只 会 选择 href 属 性 值 中 包含 http://w3.org/ 的 链接 元 素 , 注意 到 我 的 措辞 了 吗 ? 
我 没有 说 “ 指 回 W3C 网 站 的 超 链接 元 床 ”， 因 为 事实 并 非 如 此 。 这 里 面 的 原则 是 必须 做 到 精确 匹 
配 ， 每 个 字母 都 要 匹配 。 如 条 有 这 样 一 个 链接 <a href="http://www.w3.org/">， 则 该 选择 天 
不 会 选择 这 个 链接 ， 因 为 必须 做 到 精确 匹配 才 行 。 

或 许 这 对 于 超 链接 来 说 用 处 不 太 大 , 但 是 它 可 以 帮助 租 选 特定 的 图 像 ( 以便 为 其 添加 样式 )， 
比如 公司 的 标志 。 如 果 你 的 CMS 总 是 为 页 顶 的 标志 生成 这 样 的 标记 : 


<img src="/img/2010/mainlogo.png" alt="ConHugeCo Ind." /> 
则 总 是 可 以 用 这 样 的 方式 选择 该 图 像 : 
img[src="/img/2010/mainlogo.png"] 


你 不 需要 给 它 设 置 类 或 者 ID 或 者 其 他 什么 东西 ， 而 只 需要 基于 src 的 值 给 它 设 置 样式 。 前 提 
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是 ， 正 如 我 所 况 ， 你 应 该 确定 它 总 是 会 剑 持 那个 特定 的 值 ， 而 不 会 变 成 其 他 值 。( 对 于 非 精 确 匹 
配 ， 请 参见 2.14 节 。) 

有 一 点 需要 注意 ， 按 照 CSS 规 范 ,“ 选 择 硕 中 属性 名 和 属性 值 是 否 区 分 大 小 写 取 决 于 文档 语 
言 (参见 www.w3.org/TR/CSS2/ selector.html#matching-attrs )。 换 句 话 说 ， 有 些 标记 语言 可 能 会 
区 分 属性 名 的 大 小 写 ， 而 男 外 一 些 语言 则 不 会 。XHTML 束 区 分 大 小 写 ， 所 以 你 最 好 假定 属性 名 
和 属性 值 都 是 区 分 大 小 写 的 。 


2.12 类 的 属性 选择 


如 有 果 读 过 前 面 一 方 ， 你 可 能 会 想 :“ 嘿 ,我 可 以 用 属性 选择 各 改 造 一 下 .class 符 写 啊 !” 是 
的 ， 确 实 可 以 。 只 不 过 并 不 是 我 之 前 展示 过 的 某 种 方法 。 

通过 属性 选择 需 我 们 可 以 实现 跟 aiv.panel 一 样 的 效果 : 

div[class--"panel"] 

看 到 波浪 号 (~) 了 吗 ? 就 在 等 号 的 前 面 ， 在 这 种 情况 下 它 绝对 是 个 关键 部 分 。 它 的 存在 意 
味 痢 该 属性 选择 益 会 选择 “以 空格 分 隔 的 类 名 列表 中 包含 该 词 的 元 素 "， 这 就 是 小 小 波 痕 号 的 巨 
大 作用 。 

为 了 加 深 理解 ， 我 来 展示 一 下 没有 波浪 号 的 话 会 发 生 什 么 。 去 挥 波浪 号 后 的 选择 各 为 : 

div[class-"panel"] 

这 会 选择 任何 class 属 性 的 值 为 pane1 且 只 能 为 panel1 的 Qiv 元 素 ， 如 果 采 个 元 素 的 class 属 
性 值 为 panel weather， 则 这 个 选择 妖 无 法 匹配 该 元 科 ， 因 为 panel 和 panel weather 不 是 精确 
JU fic. 而 另 一 方面 ， div.panel 则 可 以 很 好 地 匹配 <div class="panel weather">。 

通过 使 用 波浪 号 可 以 获得 与 “点 类 ”( dot-class ) 语法 完全 相同 的 效果 , 因此 下 面 两 个 规则 除 
了 输入 的 字母 不 同 之 外 ， 其 他 方面 完全 相同 : 


div[class~="panel"] 


div.panel 

AY EPR EIFS, “WR, BE! 我 一 下 想 知 道 如 何 才能 选择 一 个 又 长 又 复杂 的 类 呢 。 
咖 ， 但 是 记 住 ， 属 性 选择 硕 并 不 只 局 限于 我 们 上 面 使 用 过 的 这 两 个 属性 一 一 类 和 id。 你 可 以 
选择 任何 属性 值 为 可 以 被 空格 分 隔 的 一 串 单词 的 元 系 ， 而 说 到 “单词 ”, 我 指 的 是 “字符 构成 
HE AF EB” o 

P 面 是 使 用 属性 选择 需 的 其 他 几 个 例子 : 

img[alt--"figure"] 任何 alt 属 性 文本 中 包含 “figure” 的 图 像 元 素 


table[summary~="data" ] 任何 summary 属 性 文本 中 包含 “data” 的 表格 元 素 


*[title--"2009"] 任何 title 属 性 文本 中 包含 “2009” 的 元 素 


i 


v 
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2.13 ID 还 是 属性 选择 器 
不 仅 可 以 把 属性 选择 器 当做 类 选择 器 的 加 长 蔡 代 版 , 还 可 以 用 它 代替 ID 选择 器 。 下 面 两 条 规 
则 会 选择 同样 的 元 素 : 


p#lead-in {font-weight: bold;} 
plid="lead-in"] {font-weight: normal; font-style: italic;} 


很 好 ， 不 过 先 花 点 儿 时 间 考 虑 一 下 这 两 条 规则 的 视觉 效果 ， 如 图 2-12 所 示 ，lead-in 段 落 会 
同时 拥有 加 粗 和 和 斜体 的 效果 。 


eoo SuperMuscleGro Works! = 


SuperMuscleGro Works! 


SuperMuscleGro made me the strongest man on the block! Now I don't have to take abuse sitting down, lying down, or in any other 
position. Try it today! 


Scientifically Proven! 


Scientists have long studied the various ingredients found in SuperMuscleGro and have shown that they each can help support a healthy, 
growing lifestyle. 


Packed With Nutrimins! 
Our SuperMuscleGro formula helps to support your physical development thanks to its unique blend of nutrients and vitamins. 


SuperMuscleGro's combination of essential nutrients and organic extracts work to promote a context for personal growth and increased 
muscle density. 


Loaded With Anti-Oximega-4! 


Anti-Oximega-4 is our proprietary mixture of mineral and vegetable essences. Our secret, scientifical blend of ingredients provides beneficial 
assistance to your body's core systems. It blocks the adsorption of excess fatty acids and spares muscular cells from being oxidized in 
damaging ways. 


图 2-12 ”根据 不 同 的 特殊 性 合并 样式 


这 是 因为 属性 选择 融 的 特殊 性 贡献 为 0.0,1,.0， 与 类 和 伪 类 的 贡献 相同 。 因 此 第 一 条 规则 的 特 
殊 性 为 0,1,0,1， 而 第 二 条 规则 的 特殊 性 为 0,0,1,1。 在 字体 粗细 的 斗争 中 ， 第 一 条 规则 因 其 较 高 的 
特殊 性 胜出 了 。 

这 是 特殊 性 的 一 个 有 趣 的 小 技巧 ,通过 它 可 以 引入 胃 新 的 创作 模式 。 例 如 ， 你 或 许 还 记得 之 
前 在 2.8 节 讨论 过 的 ID 会 轻松 地 胜 过 类 ， 并 且 你 或 许 已 经 考虑 用 类 来 选择 所 有 的 标签 了 o WIRE 
户 群 都 在 使 用 文 持 属 性 选择 需 的 浏览 硕 , 那么 你 就 又 可 以 把 ID 和 类 混 着 用 了 , 然后 在 需要 通过 ID 
引用 元 素 时 使 用 属性 选择 需 即 可 。 通 过 这 种 方式 ， 如 不 用 担心 #ID 选 择 天 的 特殊 性 会 胜 过 你 写 的 
其 他 任何 东西 了 。 
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2.14 ”部 分 属性 值 选择 


当 CSS2 完 成 之 后 ， 下 个 版 本 的 CSS 制 定 工 作 就 开始 了 ， 即 我 们 称 为 CSS3 ， 尽 管 已 经 不 再 是 
一 个 规范 了 (这 个 说 来 话 长 )。 其 中 一 个 最 受 关 注 的 领域 就 是 选择 句 ， 而 属性 选择 句 也 不 例外 。 
规范 的 制定 者 们 挑选 出 了 一 系列 子 串 匹配 模式 ， 它 们 全 都 非常 有 用 。 

最 基本 的 一 个 是 子 串 匹 配器 。 要 想 看 看 它 有 多 大 用 处 的 话 ， 考 虑 一 个 之 前 的 例子 : 

a[href="http://w3.o0org/"] 

该 选择 需 会 选择 全 部 指 回 这 个 精确 UREL 的 链接 元 素 , 这 没有 任何 问题 。 然而, 假设 有 很 多 个 
链接 到 W3C 网 站 ， 而 不 只 是 主页 的 链接 , 并 且 你 还 想 对 它们 应 用 同样 的 样式 。 解 决 这 个 问题 的 一 
个 好 办 法 就 是 只 选择 URL 中 的 w3.org 部 分 ， 如 图 2-13 所 示 。 下 面 是 具体 做 法 : 


a[href*-"w3.org"] {font-weight: bold;} 


Further Resources 
Home Abstract Proposal Summary Further Resources Contact 


Here are some links for further reading on this and related topics. 


。 WHAT-WG 

e WHAT-WG HTMLS specification 

. W3C 

。 W3C HTMLS specification (latest version) 

e W3C HTMLS specification for Authors (latest version) 
e HTMLS Doctor 


图 2-13 ”选择 所 有 UREL 中 包含 w3.org 的 链接 元 素 


是 的 ， 只 需要 在 等 号 前 面 加 个 星 号 就 行 了 。 注 意 这 不 是 通用 选择 器 ,也 不 能 把 星 号 放 到 值 的 
前 面 来 创建 UNIX 或 者 grep 式 的 通配符 。 你 只 能 把 它 放 到 等 号 的 前 面 ， 意 思 是 “属性 值 中 将 包含 
该 字符 序列 ”。 

一 如 既往 ,这 个 选择 需 也 可 以 用 在 任何 元 素 的 任何 属性 上 。 回 顾 之 前 选择 公司 唯一 标志 图 像 
的 例子 ， 你 还 可 以 这 样 写 : 

img[src*-"mainlogo.png"] 

E Sik FEE fif d8 I6] mainlogo.png X- PF BJ Rl (img) 元 素 ， 或 者 是 src 属 性 值 中 包含 
mainlogo .png 这 些 字 符 的 图 像 元 素 。 因 此 ， 它 将 同时 选择 : 


<img src="/img/2010/mainlogo.png.gif" alt="ConHugeCo Inc." 7» 
<img srces"/1mg/2010/mainlogo.pngdir/big.png" alt="ConHugeCo Inc." /> 


然而 ， 你 或 许 不 应 该 这 样 命名 文件 和 目录 。 当 然 ， 这 只 是 建议 。 
有 许多 创造 性 的 方式 可 以 使 用 这 种 特殊 的 能 力 , 通过 选择 图 像 元 系 URL 中 对 应 的 部 分 可 以 选 
择 来 日 于 特定 上 日 录 中 的 图 像 。 因 此 ， 根 据 链 接 元 系 的 href 属 性 值 ， 你 就 可 以 对 链接 到 你 网 站 某 
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个 特定 区 域 的 链接 应 用 样式 了 。 


a[href*-"/contact"] (color: maroon; } 
a[href*-"/news"] {font-weight: bold; } 


请 牢记 ， 应 该 区 分 属性 值 的 大 小 号 ， 因 为 这 样 可 以 把 事情 变 得 简单 。 因 而 下 面 的 3 个 例子 中 
头 两 个 可 以 匹配 到 ， 而 第 三 个 则 不 能 。 


img[alt*="Figure"] (border: lpx solid gray;} 


<img src="figl.gif" alt="Figure 1. The larch." /> 

<img src="fig2.gif" alt="Figure 2. Mayor Quimby, a political figure of some note." /> 
«img src-"digg.gif" alt="Several men trying to figure out how to dig a hole." /> 

I 


第 二 个 图 像 之 所 以 没有 匹配 是 因为 “figure” 与 “Figure” 是 不 同 的 。 当 然 ， 在 这 种 情况 下 或 
许 是 个 好 事 ， 因 为 (根据 alt 的 文本 ) 第 三 个 图 像 并 不 是 作为 常规 的 插图 (Figure) 出 现 的 ， 它 
只 是 恰好 在 alt 属 性 值 中 含有 “figure” 这 个 词 而 已 。 这 也 没关系 , 但 是 要 知道 下 面 的 情况 也 会 被 
DU fic : 

<img src="lost.gif" alt="Lost again. Figures, don't it?" /> 
是 的 ， 是 一 样 的 “Figure”， 所 以 会 匹配 。 

如 果 知 道 大 小 写 只 差 一 个 字母 ,， 那 就 很 容易 突破 这 种 限制 了 。 因 此 ， 如 采 想 确保 选择 全 部 包 
含 “Figure” 和 “figure” 的 实例 ， 那 么 可 以 让 选择 帮 变 成 这 样 : 

img[alt*="igure"] (border: 1px solid gray;} 

当然 它 也 会 匹配 诸如 “configure” “disfigure” FU "oliguresis" 4 〈( 仅 举 几 例 ) 这 样 的 实例 。 

然而 ， 子 串 选 择 并 不 止 于 此 。 具 体 将 在 下 一 市 详细 解释 。 


2.15 更 多 部 分 属性 值 选 择 


尽管 任意 属性 值 的 子 串 匹配 已 经 很 好 了 ( 见 2.14 节 ), 但 有 时 你 可 能 想 限制 只 查找 属性 值 的 
开头 或 结尾 部 分 。 华 运 的 是 ， 确 实 有 几 个 办 法 可 以 实现 。 

如 果 想 根据 属性 值 的 开始 部 分 的 子 串 进行 选择 ， 可 以 使 用 这 种 模式 : 

a[href^-"http"] 

由 于 有 了 脱 字符 〈^ )， 该 规则 会 选取 任何 href 属 性 值 是 以 http 开 头 的 链接 元 素 。 用 这 种 方 
式 很 容易 选择 全 部 的 站 外 链接 。 假设 全 部 站 内 链接 都 是 相对 于 页 面 或 者 站 点 的 , 并 且 在 文件 系统 
里 不 使 用 http 字 符 串 ， 则 你 可 以 简单 地 这 样 写 : 

a[href^-"http"] {font-weight: bold; } 

或 者 更 复杂 一 点 儿 ， 像 这 样 : 


a[href^-"http"] ípadding-right: 18px; 
background: url(/pix/external.png) 100% 50$ no-repeat; } 


结果 如 图 2-14 所 示 。 
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Further Resources 
Home Abstract Proposal Summary Further Resources Contact 


Here are some links for further reading on this and related topics. 


。 WHAT-WG@ 

e WHAT-WG HTMLS specification (5! 

: W3C 

。 W3C HTMLS specification (5! (latest version) 

。 W3C HTMLS specification for Authors (5j (latest version) 
。 HTMLS Doctor @ 


图 2-14 ”为 http 开 头 的 链接 添加 图 标 


要 想 根据 属性 值 的 结尾 子 叮 选 择 元 素 ， 可 以 使 用 这 个 模式 : 

a[href$-".pdf"] 

由 于 有 了 美元 符号 〈$ )， 该 规则 会 选择 href 属 性 值 是 以 .pdf 结尾 的 链接 元 素 。 这 是 使 PDF 
文件 下 载 链 接 变 得 显眼 一 些 的 傈 单 办 法 ， 如 图 2-15 所 示 。 例 如 : 


a[hrefS-".pdf"] {padding-right: 18px; 
background: url(/pix/pdf.png) 100% 50% no-repeat; } 


Further Resources 
Home Abstract Proposal Summary Further Resources Contact 


Here are some links for further reading on this and related topics. 


e WHAT-WG 
。 WHAT-WG HTMLS specification 4 
。 W3C 


。 W3C HTMLS specification f¥ (latest version) 
e W3C HTMLS specification for Authors (latest version) 
。 HTMLS Doctor 


图 2-15 PDF 文档 链接 的 PDF 图 标 
这 真是 太 棒 了 ! 下 面 还 有 其 他 一 些 使 用 属性 选择 需 对 链接 应 用 样式 的 例子 。 


a[href^-"https"] dc^ HOS t B Be 
athref*="mailto"] 电子 邮件 联系 链接 
a[href^-"aim"] AOL 即时 通信 服务 链接 
a[href$-".doc"] 微软 Word 文 档 
a[href$-".xls"] 微软 Excel 文 档 


a[href$=".zip"] 压缩 文档 
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一 如 既往 ， 记 住 这 里 并 不 局 限于 超 链 接 。 如 有 果 回 想 一 下 2.14 玫 里 “Figure” 的 那个 例子 ， 你 
会 很 快意 识 到 许多 问题 都 可 以 用 一 个 简单 的 脐 字 符 解 决 : 

img[alt^-"Figure"] (border: 1px solid gray;) 

现在 我 们 选择 的 图 像 元 每 的 alt 文 本 是 精确 地 以 “Figure” 开 始 的 ， 并 且 不 用 担心 “Figure” 
出 现在 alt 文 本 的 中 间或 者 其 他 地 方 的 情况 ， 这 些 情 况 都 会 被 跳 过 。 


2.16 选择 后 代 元 素 


基于 元 系 在 文档 结构 中 的 位 置 选 择 元 系 也 很 常见 ， 这 通常 是 使 用 后 代 选 择 带 实现 的 ， 就 像 
JURE: 

div#header a (color: #DEFACE; } 

该 规则 会 选择 id 为 header 的 aiv 的 后 代 元 素 〈 包 含 在 aiv 中 ) 中 的 全 部 销 点 元 素 (a )。 

RE RUB F , 这 确实 是 我 们 想 要 的 效果 :选择 头 部 的 链接 元 素 而 不 用 管 它们 在 头 部 的 位 置 ， 
也 不 用 考虑 两 个 元 素 之 间 会 不 会 有 其 他 元 系 。 

然而 ， 有 时 候 你 或 许 想 选择 作为 其 他 元 素 子 元 系 的 那些 元 素 ， 而 不 是 任意 的 后 代 元 素 。 想 名 
一 下 只 选择 作为 有 序列 表 (01) 元 系 子 元 素 〈 而 不 是 后 代 元 素 ) 的 列表 项 ( 1i )， 如 图 2-16 所 示 。 
这 样 ， 如 条 有 任何 无 序列 表 包 含 在 该 有 序列 表 中 , 则 它们 的 列表 项 不 会 被 选中 。 我 们 需要 的 只 旦 
一 个 子 选择 符 。 


ol > li {list-style-type: upper-alpha; } 


A. Introduction 

B. Premises 
o The Role of Government 
o The Role of Free Markets 
o Human Behavior 

C. Problem 

D. Various Solutions 
o Systemic Restructuring 
o Regulatory Frameworks 
o Code Frameworks 
o Psychological Hacks 
o Garlic Presses 

E. Conclusion 


图 2-16 ”只 选择 作为 有 序列 表 子 元 系 的 列表 项 


这 个 大 于 号 限制 了 只 能 选择 有 序列 表 的 子 元 素 。 如 琳 把 它 去 挥 的 话 , 该 规则 就 会 应 用 在 作为 
有 序列 表 后 代 的 任何 列表 项 上 ， 包括 舱 侄 的 列表 项 ( 参见 图 2-17 )。 

是 的 ， 确 实 会 发 生 这 种 情况 ， 我 没 骗 你 。 图 2-17 中 展示 的 是 含有 有 序列 表 标 志 的 无 序列 表 ， 
发 生 这 种 情况 只 是 因为 我 去 挥 了 大 于 号 。 
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A. Introduction 

B. Premises 
A. The Role of Government 
B. The Role of Free Markets 
C. Human Behavior 

C. Problem 

D. Various Solutions 
A. Systemic Restructuring 
B. Regulatory Frameworks 
C. Code Frameworks 


D. Psychological Hacks 
E. Garlic Presses 
E. Conclusion 


图 2-17 无 序列 表 项 被 应 用 了 编号 样式 


2.17 ”模拟 部 分 子 选择 


如 果 不 得 不 支持 像 IE6 这 种 不 文 持 子 选 择 符 的 古董 浏览 右 ， 并 且 也 不 想 靠 JavaScript 添 加 对 这 
些 浏 览 硕 的 文 持 〈 见 1.10 人 8 )， 那 你 可 以 通过 通用 选择 融 模 拟 子 选择 。 

假设 我 们 希望 为 1iq 为 main 的 aiv 中 的 全 部 aiv 添 加 一 个 边框 ( 如 图 2-18 所 示 ), 使 用 子 选择 符 
的 方式 为 : 


divimain > div (border: lpx solid gray; } 


Hey-ho! 


I'm a div. 


1. This list 
2. is contained by 
3. another div. 


图 2-18 ”伪造 子 选 择 
好 了 ， 和 那么 我 们 怎么 模拟 这 个 效果 呢 ? 这 样 : 


divimain div (border: 1px solid gray; } 
divimain * div (border: 0;} 


A^ — 


第 二 条 规则 选择 了 ia 为 main 的 aiv 的 所 有 后 代 的 后 代 aiv 元 素 。 实 际 上 ， 它 撤销 了 第 一 条 规 
则 的 效果 。 两 条 规则 都 应 用 到 aiv#main 的 孙子 aiv 上 ， 并 且 都 设置 了 边框 ， 因 而 它们 是 冲突 的 。 
但 因为 它们 具有 相同 的 特殊 性 , 所 以 最 后 一 个 规则 胜出 。 至 于 aiv#main 中 的 daiv 元 素 则 只 能 被 两 
条 规则 中 的 第 一 个 选中 ， 所 以 边框 仍然 还 在 。 

有 一 点 是 需要 牢记 的 , 这 个 “伪造 ” 子 选择 技术 只 能 用 于 非 继 承 的 属性 。 对 于 可 继承 的 属性 ， 
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你 可 以 创建 一 些 半 想不到 的 效果 。 举 个 例子 ,假设 你 写 了 如 下 规则 : 


ol li {font-weight: bold;} 
ol * li {font-weight: normal; } 


假设 你 希望 加 粗 具 有 某 个 特定 类 名 的 有 序列 表 下 的 无 序列 表 的 字体 ( 如 图 2-19 所 示 ): 


ol .urgent ul {font-weight: bold; } 


_ 


. Introduction 
. Premises 
o The Role of Government 
o The Role of Free Markets 
o Human Behavior 
. Problem 
Various Solutions 
o Systemic Restructuring 
o Regulatory Frameworks 
o Code Frameworks 
o Psychological Hacks 
o Garlic Presses 
. Conclusion 


bà 


A w 


un 


图 2-19 继承 的 样式 被 直接 指定 的 样式 覆盖 了 
加 上 这 条 规则 后 , 这 些 无 序列 表 中 的 列表 项 会 怎样 ” 不 加 粗 ! 为 什么 ?这 是 因为 之 前 展示 的 


ol * 11 规 则 会 直接 作用 到 这 些 列 表 项 上 , 因此 , font-weight: normali meEMMNol.urgent 
1i 规 则 继承 来 的 加 粗 (bolq ) 的 值 。 

如 果 使 用 非 继 承 的 属性 就 不 会 发 生 这 种 情况 了 ， 比 如 background ( 背景 )、border (边框 )、 
display (显示 )、margin (MAME), padding (内 边 距 ) 等 。 如 果 你 还 不 清楚 哪些 属性 是 继承 
属性 ， 可 以 看 这 里 w3.org/TR/CSS2/propidx.html 或 者 看 CSS 规 范 中 关于 属性 的 描述 部 分 。 


2.18 siz 


除了 能 够 依据 父子 关系 和 祖先 后 代 关 系 选 择 元 素 之 外 , AEP UU Abaca ETH 
同 拥有 一 个 父 元 系 ) 来 进行 选择 也 是 可 能 的 。 在 图 2-20 中 可 以 看 到 ， 突 出 显示 的 即 为 兄 辆 元 系 。 


图 2-20 ”突出 显示 的 兄 第 元 系 
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FSI ATU ERA LICR, TED I] — “Ph SCIL Ts ihe LS ICR. 2-217 
选择 了 跟 在 二 级 标题 后 的 段落 元 系 。 


SuperMuscleGro Works! 


Home Science Magic Contact 


SuperMuscleGro made me the strongest man on the block! Now I don't have to take abuse si 
position. Try it today! 


Scientifically Proven! 


Scientists have long studied the various ingredients found in SuperMuscleGro and have shown 
growing lifestyle. 


Packed With Nutrimins! 


Our SuperMuscleGro formula helps to support your physical development thanks to its unique 
SuperMuscleGro's combination of essential nutrients and organic extracts work to promote a c 
muscle density. 


Loaded With Anti-Oximega-4! 
Anti-Oximega-4 is our proprietary mixture of mineral and vegetable essences. Our secret, scie 


assistance to your body's core systems. It blocks the adsorption of excess fatty acids and spare 
damaging ways. 


图 2-21 选择 紧 跟 在 二 级 标题 后 的 段落 元 素 


CSS 定 义 了 一 个 选择 符 ， 它 允许 基于 元 素 之 前 的 兄 种 元 系 来 选择 元 系 。 例 如 ， 如 果 想 移 除 任 
何 紧 跟 在 二 级 标题 《h2 ) 元 素 后 的 段落 〈《P ) 元 素 的 上 外 边 距 ， 则 可 以 这 样 写 : 


h2 {margin-bottom: 0; } 
h2 + p {margin-top: 0;} 


Th BEAR H T ee EE CARA PAE, EDU AR E vIc MWK 
格 或 者 标题 元 素 之 后 的 列表 元 素 增加 间距 等 。 

还 有 一 个 非常 类 似 的 选择 符 ， 它 允许 选择 后 续 的 兄弟 元 素 ， 但 不 包含 直接 相 邻 的 兄 蜀 元 素 。 
它 使 用 一 个 波浪 号 作为 选择 符 : 

hi ~ ul {list-style-type: lower-alpha;} 

对 下 面 的 标记 来 说 ， 这 段 代码 会 选择 位 于 hl 元 素 后 面 且 与 之 共享 父 元 系 的 ul 元 素 ， 除 第 一 
Zu os 


<body> 

<ul>...</ul> 

<h1>Planning</h1> 

<p>This is an abstract.</p> 
<ul>...</ul> 

<ul>...</ul> 

<h2>Introduction</h2> 

<p>We have some thoughts here.</p> 
<ul>...</ul> 

</body> 


由 于 这 些 元 系 共 至 父 元 系 ( body 元 素 )， 因 而 它们 都 是 兄 冲 元 系 。 因 为 第 一 个 列表 元 系 没 有 
跟随 在 一 级 标题 hl 后， 所 以 它 没 有 被 hl ~ ul 选中 ， 而 其 他 列表 元 系 午 被 选中 了 ， 虽 然 它 们 中 间 
还 有 其 他 元 系 。 


i 
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2.19 生成 内 容 


CSS 提 供 了 一 种 可 以 生成 内 容 并 将 其 插入 到 文档 中 的 方法 ,这 使 通常 意义 上 的 内 容 与 表现 的 
FEBS AE TSOR pa 该 方法 是 通过 伪 元 系 :before 和 : after 以 及 它们 的 content 属 性 实现 的 。 

下 面 是 个 插入 内 容 的 例子 ( 图 2-22 中 亦 有 展示 )， 在 全 部 列表 项 的 文本 之 前 插入 一 个 短 字 
TEP: 


li:before {content: "Item: "; border-bottom: 1px solid gray; } 


v 


. Item: Introduction 

. Item: Premises 
o Item: The Role of Government 
o Item: The Role of Free Markets 


o Item: Human Behavior 


. Item: Problem 


. Item: Various Solutions 
o Item: Systemic Restructuring 
o Item: Regulatory Frameworks 
o Item: Code Frameworks 
o Item: Psychological Hacks 
o Item: Garlic Presses 

. Item: Conclusion 


图 2-22 ”在 列表 项 前 面 加 点 儿 内 容 


注意 在 content 属 性 值 中 的 空 日 ， 它 是 作为 属性 值 字 符 串 的 一 部 分 插入 的 。 如 果 没 有 这 个 空 
日 ， 也 就 没有 右 侧 的 内 边 距 ， 元 系 就 会 和 生成 的 内 容 贴 得 太 近 。( 当然 ， 我 们 完全 可 以 给 生成 的 
内 容 设 置 右 侧 内 边 距 ， 只 是 这 里 没 这 人 么 做 而 已 。) 

要 知道 ， 只 能 插入 文本 而 不 能 插入 结构 。 如 果 试 图 把 标记 插入 到 content 属 性 值 中 ， 则 标记 
会 被 转换 成 纯 文 本 。 

li:before (content: "<em>Item:</em> "; border-bottom: 1px solid gray;} 


如 图 2-23 所 示 ， 翡 剧 了 。 


— 


. «em»Item:«/em» Introduction 

. <em>Item:</em> Premises 
o <em>Item:</em> The Role of Government 
o «em»Item:«/em» The Role of Free Markets 
o <em>Item:</em> Human Behavior 

. «em»Item:«/em» Problem 

. <em>Item:</em> Various Solutions 
o «em»ltem:«/em» Systemic Restructuring 
o <em>Item:</em> Regulatory Frameworks 
o <em>Item:</em> Code Frameworks 
o <em>Item:</em> Psychological Hacks 
o <em>Item:</em> Garlic Presses 

. <em>Item:</em> Conclusion 


t3 


AU 


CA 


图 2-23 ”标记 被 转换 成 了 纯 文 本 
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为 一 方面 ， 你 也 可 以 插入 浏览 带 所 支持 的 任何 字符 或 图 像 子 人 牺 ( 如 图 2-24 所 示 )， 只 需要 知 
赴 它 们 的 十 六 进 制 字符 编码 ， 并 且 在 前 面 加 一 个 反 斜 枉 〈《 也 称 作 转 义 符 ) 即 可 。 


li:before {contents "XBB. ";} 


. »Introduction 

. »Premises 
o »The Role of Government 
o »The Role of Free Markets 
o »Human Behavior 

. »Problem 


. » Various Solutions 
o »Systemic Restructuring 
o »Regulatory Frameworks 
o »Code Frameworks 
o »Psychological Hacks 
o »Garlic Presses 

. »Conclusion 


图 2-24 ”通过 转 义 编码 插入 字符 


Myc EVE, 直接 把 Unicode 字 符 写 进 CSS, 把 样式 表 全 部 改 成 Unicode 编 码 也 是 可 行 的 。 然而 ， 
如 果 服 务 需 配置 为 只 能 使 用 ASCII 编 码 发 送 CSS， 那 可 能 会 出 现 问题 。 如 果 你 可 以 更 改 服务 需 配 
置 的 话 ， 就 不 必 转 义 十 六 进 制 字 符 ， 下 接 把 字符 写 进 样式 表 即 可 。 不 过 ， 经 过 全 面 的 测试 ， 较 老 
的 浏览 妖 可 能 无 法 恰当 地 处 理 Unicode 字 符 。 

:before#ll:afterze TLR, 因为 它们 就 好 像 在 元 素 中 插入 了 一 个 封闭 的 元 素 。 这 种 伪 元 素 
可 能 放 到 元 素 内 容 的 前 面 或 着 后 面 ， 这 取决 于 使 用 了 哪个 伪 元 素 。 你 可 以 像 对 待 span 那 样 对 伪 
元 素 应 用 样式 。 

使 用 生成 内 容 可 以 做 很 多 有 趣 的 事情 , 不 过 也 要 谨慎 。 设 想 如 果 CSS 没 有 载 人 或 者 不 被 文 持 ， 
页 面 会 发 生 什么 情况 ( 例如 在 一 些 移 动 设备 上 ) ? 如 果 使 用 生成 内 容 插入 一 些 对 理解 页 面 至 关 重 
要 的 内 容 ， 那 么 当 没 有 生成 内 容 时 就 会 很 太 烦 。 因 此 ， 强 烈 推 荐 仅 将 生成 内 容 用 于 渐进 增强 
( progressive enhancement ) 的 特性 ， 以 便当 页 面 不 文 持 这 些 特性 时 也 可 以 正常 展现 内 容 。 

回 页 面 的 打印 副本 中 搬入 超 链 接 UREL 就 是 个 很 好 的 渐进 增强 示例 ， 如 网 2-25 所 示 。 为 了 实现 
这 种 效果 ， 把 下 面 的 规则 添加 到 打印 媒体 样式 表 中 : 

a[href]:after (content: " [" attr(href) "]"; font-size: smaller;} 

pO FE TE ER, DID VA RAS SCREVASRERERT , TIED UL IBI ER EET — EH a HE Be, mS 
SÉZNIEJXHJURLeS HW 9a SCRAPER, TT EN IBDSLH Hg v CRT RASA 
4€, iB "Going To Print", Jh http://alistapart.com/articles/goingtoprint. ) 

生成 内 容 已 经 得 到 了 广泛 文 持 , 但 IE8 之 前 的 版 本 不 支持 生成 内 容 。 要 让 IE8 之 前 的 版 本 文 持 
生成 内 容 ， 可 以 使 用 第 1 章 介绍 的 IE9.js。 


(D 关于 渐进 增强 请 参见 http:/en.wikipedia.org/wiki/Progressive_enhancement。 


Print style sheets to the rescue 
One of the wonderful things about CSS is that it allows authors to create media-specific styles for a single 


document. We're pretty used to styling for the screen, but thinking about other media isn't a habit yet. And as all 
the "printer-friendly" links attest, our thinking about the print medium has been limited to recreating a document in 
a different way. 


Why bother, when the power to offer your readers a better view of your material in print is no further away than a 


well-structured document and a media-specific style sheet? 


You can take any (X)HTML document and simply style it for print, without having to touch the markup. Worries 
about version skew between the web and print versions suddenly become a thing of the past. Best of all, it's simple 
to do. (For more information on the basic principles involved in creating media-specific stylesheets in general and 
print styles in particular, see "Print Different (http://www.meyerweb.com/eric/articles/webrev/200001.html) ”at 


meyerweb.com.) 


Let's look at how A List Apart got some new print styles that danced around a browser bug and, in the end, made 
the printed output look much better. (Ed. The print style sheet discussed below was used in ALA 2.0, whose 
February 2001 CSS redesign helped usher in the modern CSS-layout era. Some details below pertain only to that 
layout, and not to ALA 3.0. But the principles Eric Meyer discusses in this article are as true and as generally 


applicable today as they were when this article first appeared in ALA.) 


Fixing a float flub 


As you can see by visiting Bugzilla ent 

browsers like Netscape 6.x or Mozilla have a problem with printing long floated elements. If a floated element runs 
past the bottom of a printed page, the rest of the float will effectively disappear, as it won't be printed on the next 
page. 


If you have a site styled like A List Apart, and the entire article content is contained in one big float, then that 


图 2-25 ” 回 打 印 样式 表 中 搬入 链接 URL 
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一 些 恰当 的 提示 可 以 让 人 受益 终生 , IR A ae "zoe oe 638. ENET 
而 不 是 粮 料 街道 上 的 大 房子 ”和 “不 要 吃 钠 笔 氏 ”"。 同 理 ， 在 CSS 中 一 些 巧 妙 的 只 言 片 堵 也 能 立 
ALERA EYRE 

本 章 我 们 将 讨论 关于 属性 值 排序 的 重要 性 、 正 确 使 用 无 单位 的 值 、 隐 藏 元 系 的 儿 种 方式 、 控 
制 边框 样式 的 方法 、 列 表 扩 马 以 及 打印 样式 的 开发 等 内 容 。 


3.1 验证 


这 可 能 已 经 是 老生 常 谈 了 ， 你 或 许 想 知道 为 什么 我 会 在 这 人 么 显 而 匈 见 的 话题 上 浪费 笔 右 纸 
张 。 然 而 ,你 究竟 多 和 久 才 会 真正 进行 一 次 验证 呢 ? 是 在 项 目 结束 时 验证 一 次 , 还 是 自始至终 都 进 
行 验证 呢 ? 

当然 ， 我 并 不 是 让 你 在 编辑 文档 中 每 次 单 击 “ 人 保存” 时 都 进行 验证 ， 而 是 建议 在 构建 页 
面 的 过 程 中 养 成 定期 验证 的 好 习惯 ， 这 样 就 能 在 问题 还 没有 影 啊 到 整个 页 面 之 前 及 时 地 发 现 
EM. 

目前 已 经 有 一 些 很 成 熟 的 HTML 和 CSS 验 证 硕 了。 在 HTML 领 域 ， 或许 应 用 最 广泛 的 验证 姨 
就 是 W3C 目 己 提 供 的 ( 地址 为 validator.w3.org， 如 图 3-1 所 示 )， 而 它 以 CSS 为 中 心 的 “ 表 兄 第” 
也 同样 很 受 欢 迎 ， 网 址 为 jigsaw.w3.org/css-validator/。 

如 采 你 是 被 卡 在 某 个 防火 墙 后 面 进行 开发 ， 或 者 全 部 开发 工作 都 在 笔记 本 上 的 本 地 Web 服 
务 希 上 进行 的 话 ， 该 怎么 办 呢 ? 别 担心 , 这 时 你 可 以 使 用 Firebug 或 者 其 他 开发 工具 的 “本 地 验 
证 ”功能 。 只 要 你 能 浏览 网 络 ， 就 可 以 验证 任何 能 看 到 的 页 面 ， 而 不 用 考虑 正在 浏览 的 页 面 是 
否 能 被 公开 浏览 。( 即使 页 面 是 在 公共 的 网 站 上 , 我 也 习惯 使 用 “本 地 验证 ”, 只 是 为 了 养 成 习 
惯 而 已 。) 


3.2 WF BAR IR A 59 


Markup Validation Service 


Check the markup (HTML, XHTML, ...) of Web documents 


Validate by URI Validate by File Upload Validate by Direct Input 


Validate by URI 


Validate a document online: 


Address: http://aneventapart.com/ 


» More Options 


This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific 


content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools 
available. 


The WSC validators rely on community support for hosting and development. 
Donate and help us build better tools for a better web. 


Home About... News Docs Help& FAQ Feedback Contribute 


This service runs the W3C Markup Validator, v0.8.6 

COPYRIGHT © 1994-2010 WSC® (MIT, ERCIM, KEIO), ALL RIGHTS RESERVED. W3C LIABILITY, TRADEMARK, DOCUMENT USE 

AND SOFTWARE LICENSING RULES APPLY. YOUR INTERACTIONS WITH THIS SITE ARE IN ACCORDANCE WITH OUR PUBLIC 
AND MEMBER PRIVACY STATEMENTS. 


3-1. W3CHJHTMLJS UE 2s 


3.2 ”调整 字体 值 的 顺序 


这 是 CSS 的 一 个 小 “ 怪 壮 ”"， 很 多 人 部 会 裁 在 这 里 ， 其 至 有 时 候 根本 不 知道 问题 出 在 了 哪里 。 
大 多 数 人 允许 使 用 多 个 关键 字 的 CSS 属 性 都 允许 以 任何 顺序 书写 关键 字 ( 想 想 


想 想 background 的 
例子 ， 它 允许 你 以 任何 顺序 指定 1 ~ 5 个 关键 字 ) 但 是 千 万 别 说 它们 每 个 都 是 这 样 。font (字体 ) 


属性 是 很 少见 的 两 个 例外 之 一 , 它 不 仅 对 最 基本 的 关键 字 组 合 有 限制 ,还 要 求 按照 特定 的 顺序 进 
行书 与 。 

下 面 是 一 个 最 基本 的 font 声 明 : 

font: «font-size» «font-family»; 

当然 ， 你 可 以 把 丘 起 来 的 词 换 成 实际 的 什 ， 就 像 这 样 : 

font: 100% sans-serif; 

问题 的 关键 是 ， 你 必须 同时 包含 这 两 个 值 并 且 按 照 既 定 的 顺序 进行 书写 ， 即 首先 是 字 


(font-size )， 然 后 是 字体 族 (font-family )。 如 果 颠 倒 了 顺序 ， 或 者 漏 反 了 其 中 的 一 个 ， M 
任何 现代 浏览 大 都 会 完全 忽略 这 条 声明 。 


此 外 ， 如 果 在 声明 中 包含 了 其 他 关键 字 ， 则 它们 全 部 (有 一 个 例外 ,将 在 下 一 节 讨论 ) 都 得 
放 在 这 两 个 必 备 的 值 前 面 ， 即 : 


00 $33 


font: 
font: 
font: 


ya att 
EE; 


FRKE Ji], 


-4 
E 
J 


bold italic 100% sans-serif; 
italic small-caps 125% Georgia, serif; 
italic bold small-caps 200% Helvetica, Arial, sans-serif; 


pue ety cs BTE BS S PELE A TAL, REE TAB ES ABA 。 
AUR XC s Ae TED, W aie ee ZS AE ZR P] 


3.3 MATS 


如 采 你 认为 上 一 市 建立 的 font 值 模式 有 点 古怪 ,那么 下 面 将 是 彻头彻尾 的 时 瞩 技 术 。 

之 前 我 说 过 , 字体 的 属性 值 至 少 要 包含 两 个 值 , 并 且 必 须 以 “ 先 字 号 后 字体 族 ” 的 顺序 书写 。 
这 是 对 的 ,但 是 有 时 候 也 可 以 在 字号 值 上 放 一 个 可 选 的 行 蝇 值 来 作为 字号 的 攻 种 附属 值 ( 如 图 3-2 
TAR )。 它 看 起 来 束 像 这 样 : 


font: 


100%/2.5 Helvetica, sans-serif; 


I'd like to share something that will be old news to readers of CSS: The Definitive Guide and all of my other books, but 


nonetheless needs to be said out loud, in public, for everyone to hear. 


The property 1ine-height can accept unitless number values. You can also give 1ine-height united values, though 


generally you shouldn't. But unitless numbers are just fine for this property. 


So what's the difference? When you define a united value, like 1em, you're setting things up to pass along the computed result 
to any descendants. For example, suppose the following CSS is applied to a document containing the following markup 
fragment: 

ul (font-size: 15px; line-height: lem;} 


li {font-size: 10px;} 


small {font-size: 80%;} 


<ul> 


<li>I'm a list item with <small>small text</small>.</1li> 


</ul> 


The ul element has its line-height computed to be 15px because for line-height, em-based values are calculated using the 


K3-2 ” 增 大 后 的 行 蜗 (为 见 彩 插图 3-2 ) 


在 字号 和 行 高 值 之 间 没 有 空格 ， 只 有 一 个 斜 杠 。 
为 Eont 声 明 添 加 行 蝇 值 的 操作 总 是 可 选 的 ， 但 是 如 末 已 经 包含 了 行 蜗 住 ， 则 它 的 放置 位 置 
就 是 固定 的 了 了， 必须 坚 跟 在 子 写 后 面 用 一 个 和 斜 杜 再 加 上 行 局 值 才 行 。 
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3.4 无 单位 的 行 高 值 


line-height (fri ) 属性 既 可 以 接受 无 单位 的 数值 ， 也 可 以 使 用 带 单 位 的 行 高 值 一 一 尽管 
一 般 情 况 下 不 推荐 这 人 么 做 。 

那么 它们 之 间 有 什么 区 别 呢 ? 当 你 定义 了 一 个 有 单位 的 值 ， 例 如 lem 或 者 100s 时 ， 就 会 将 计 
算 后 的 行 高 值 传 给 全 部 的 后 代 元 系 。 例 如 ， 假 设 将 下 面 的 CSS 应 用 到 包含 下 列 标记 的 文档 中 : 


ul (font-size: 15px; line-height: 1em;} 
li (font-size: 10px;} 


small {font-size: 80%;} 


<ul> 
<li>I’m a list item with «small»small text</small>.</li> 
</ul> 


无 序列 表 〈ul ) 元 素 的 行 高 计算 值 为 15 px， 这 是 因为 对 于 行 高 来 说 ， 基 于 em 的 值 是 使 用 元 
素 本 刁 计 算 后 的 字号 值 来 进行 计算 的 ， 对 于 百分比 也 是 一 样 的 。 由 于 直接 声 明了 字号 值 ,因而 我 
们 可 以 得 出 字号 计算 后 的 像素 值 。 

这 里 有 一 个 可 能 会 令 人 惊讶 的 特性 : 这 个 15 px 的 计算 值 会 传 给 后 代 元 素 。 换 句 话说 , 1i( 列 
表 项 ) 元 系 和 smal1 元 素 会 继承 一 个 15 px 的 行 高 值 。 它 们 不 会 再 根据 目 身 的 字号 值 改 变 行 高 值 。 
事实 上 ， 它 们 根本 不 会 再 改变 行 遍 值 ， 而 只 是 直接 获取 并 使 用 那个 13 px， 就 跟 我 这 人 么 写 的 效 采 
是 一 样 的 : 

ul {font-size: 15px; line-height: 1em;) 


li (font-size: 10px; line-height: 15px;} 
small (font-size: 80%; line-height: 15px;} 


好 了 ， 现 在 假设 我 拿 拯 行 高 值 的 em 单位 ， 则 样式 会 变 成 : 


ul {font-size: 15px; line-height: 1;} 
li {font-size: 10px;} 


small {font-size: 80%;} 


<ul> 
<li>I’m a list item with <small>small text</small>.</li> 
</ul> 


现在 传 给 后 代 元 素 (11 和 smal11 元 素 ) 的 是 这 个 原始 数字 ， 用 来 表示 后 代 元 系 所 使 用 的 一 个 
换算 系数 〈 比 如 一 个 乘 数 )， 而 不 是 计算 后 的 结果 值 。 

因此 ,所 有 继承 了 这 个 1 的 元 素 会 把 这 个 值 同 它们 目 身 的 字 扣 计算 值 相 乘 .声明 了 font-size: 
10 px 的 列表 项 元 系 会 有 一 个 10 px 的 计算 后 的 行 高 值 ， 并 且 会 将 这 个 1 传 给 smal11 元 系 ， 而 smal11 
元 素 也 会 把 这 个 值 与 目 身 的 计算 字号 值 相 乘 , 因此 这 个 8 px 的 字号 计算 后 得 到 的 行 高 值 也 是 8 pxo 

最 终结 果 与 这 样 写 的 效果 是 相同 的 : 

ul {font-size: 15px; line-height: 1;} 


li (font-size: 10px; line-height: 10px;} 
small (font-size: 80%; line-height: 8px; } 


2h 
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如 岁 3-3 所 示 ， 这 是 一 个 非常 重大 的 差异 。 这 就 是 总 是 推荐 在 诸如 html 或 boqy 元 素 以 及 任何 
可 能 包含 后 代 的 元 素 上 应 用 行 高 值 时 使 用 无 单位 数值 的 缘故 。 


* This list has a line-height of 1. 
* I'm a list item with small text. 
* I'ma list item with small text. 
e I'ma list item with small text. 


e This list has a line-height of lem. 
e I'm a list item with small text. 


e I'm a list item with small text. 
e I'ma list item with small text. 


图 3-3 ”有 单位 行 高 值 和 无 单位 行 高 值 之 间 的 差异 


3.5 避免 缺少 梓 却 的 边框 值 


边框 可 以 为 任何 设计 增添 良好 的 体验 ， 但 是 如 果 没 有 边框 样式 ， 那 么 你 想 通 过 border (X1 
HE ) 声明 来 达到 效果 就 不 太 可 能 

当 我 说 “缺少 样式 ”的 时 候 ， 不 是 指 CSS 样 式 ， 而 是 指 borqer-style 的 值 。 人 例如， 假设 你 
写 了 这 样 的 规则 : 

form (border: 2px gray;) 

很 好 ， 但 是 表单 周围 并 不 会 出 现 边 框 。 原 因 很 简单 ， 因 为 省 略 了 borqer-style 的 值 意 味 着 
将 会 应 用 boraer-style 的 默认 值 ， 而 默认 值 是 什么 呢 ? none! 所 以 前 面 的 规则 相当 于 : 

form {border: 2px gray none;} 

无 论 把 border-width 的 值 设 得 多 大 ，border-style 值 为 none 的 边框 都 永远 不 会 被 绘制 出 
来 ， 因 为 一 个 不 存在 的 边框 是 不 会 有 宽度 的 。 


3.6 ”使 用 颜色 控制 边框 外 观 


你 可 能 时 不 时 地 会 遇 到 创建 立体 的 内 纵 边 框 (inset) 或 者 外 置 边 框 〈outset ) 的 需求 (或 者 
只 是 希望 达到 这 样 的 效果 )。 我 并 不 是 在 这 里 评判 好 坏 ， 只 是 指出 一 个 可 能 的 陷阱 。 考 虑 下 面 的 
代码 : 

div (border: 5px red outset; } 

ER FRE? BERAE CEA EN e Pe Uo BY, an 3-4 AN 

HAE DE. M ELBE are fio ALA CSS WL PATCR VOR D SIM Bi 
框 的 颜色 来 产生 立体 的 效 末 ， 规 范 中 只 说 : 
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关于 边框 的 “groove”、 "ridge", “inset” 和 “outset” 这 几 个 值 的 颜色 绘制 ， 取 决 于 
元 素 的 边框 颜色 属性 ,但 是 用 户 代理 可 能 会 选择 自己 的 算法 计算 实际 使 用 的 颜色 (参见 
www.w3.org/TR/CSS21/box.html#border-style-properties )。 


000 file://localhost/Users/emeyer/Documents/Writing/Books /Smashing/figures/c03-tips-20100420/c03f004.html 


@ file://localhost/User.. hè 


avonm 一 a Mif um 3 


eoo — er ee 


This div sports an inset border, and it will not look the same across all browsers. This is due to intentional ambiguity in the specification, — cati ificati 
and is not as such a bug. More of an annoyance. 


This div sports an outset border, and it will not look the same across all browsers. This is due to intentional ambiguity in the specification, 
and is not as such a bug. More of an annoyance. 


图 3-4 A EA EAE P A AE REGALE B AP T] Ae 


注意 最 后 一 部 分 :“ 用 户 代理 可 能 会 选择 自己 的 算法 ……”， 这 是 一 个 长 期 建立 起 来 的 关于 
Web 开 发 的 真理 ， 那 就 是 永远 要 保留 可 选择 的 机 会 ， 而 浏览 带 则 一 如 既往 地 这 么 做 了 。 

可 能 你 并 不 介意 这 些 边框 的 差异 ， 如 采 是 这 样 的 话 ， 那 就 太 酷 了 了。 再 次 说 明 ， 我 不 在 这 里 评 
判 好 坏 。 如 琳 你 想 让 这 些 边框 的 效 末 在 各 个 浏览 如 中 保持 一 怪 的 话 ( 如 图 3-5 所 示 )， 则 你 需要 声 
明 一 个 实 线 的 边框 并 目 己 设置 各 边 的 颜色 。 


#innie {border-color: #800 #F88 #F88 #800; } 
#outie {border-color: #F88 #800 #800 #F88; } 


IRW, FR ROTA REA Me EL EA. MRA Pe PB LAY groove ) 
AHEM PEAR (ridge ) 的 边框 ( 如 图 3-6 所 示 ), PRMD ALTE JU WARE — nr. JF 
且 为 每 条 边 单独 指定 颜色 来 做 出 想 要 的 视 党 效果 ， 就 像 这样 : 


#innie {border-color: #800 #F88 #F88 #800; } 
form (border: 3px solid; border-color: #F88 #800 #800 #F88;} 


<form> 
<div class="innie"> 
(content and form inputs and so on here) 
</div> 
</form> 


000 file://localhost/Users/emeyer/Documents/Writing/Books/Smashing/figures/c03-tips-20100420/c03f005.html 
@ file://localhost/User.. hè 


r Wr N a Mi m — 


"- Mozilla Firefox i . N OO pogle Á v binv : » 


This div sports a solid border with per-side colors set, so it will look the same across all browsers. This is a workaround for an intentional 
ambiguity in the specification. 


This div sports a solid border with per-side colors set, so it will look the same across all browsers. This is a workaround for an intentional 


ambiguity in the specification. 


E (Q 100% v) 


á 


N 


[3-5 ”通过 彩色 实 线 边框 实现 表现 一 化 的 内 骸 边 框 和 外 置 边 框 效果 ( 为 见 彩 插图 3-5 ) 


图 3-6 KAK MR RHE ( 为 见 彩 插图 3-6 ) 


3.7 ”抑制 元 系 的 显示 


你 有 没有 想 过 让 一 个 元 素 在 页 面 上 消失 , 但 不 在 文档 源 代 码 中 删除 它 呢 ? 这 里 就 有 几 种 方法 
可 用 ， 不 过 每 种 方法 各 有 利 产 。 本 市 及 下 面 几 闻 将 具体 讨论 这 些 方法 。 

最 显而易见 的 让 元 素 消 失 的 办 法 就 是 天 挥 它 的 显示 : 

.hide (display: none; } 

当然 ， 这 会 抑制 全 部 含有 hide 这 个 类 的 元 系 的 显示 ， 这 意味 着 任何 这 样 的 元 系 都 不 会 生成 
元 系 框 。 因 此 它 不 会 对 其 他 元 系 的 布局 产生 任何 影响 ,就 像 写 根本 不 存在 一 样 ， 或 者 说 像 一 个 
M o 

这 里 有 两 个 天 于 aisplay: none 的 陷阱 ,一 个 是 次 在 的 , 一 个 是 固有 的 。 洪 在 的 问题 是 ， 如 
打下 接 通过 JavaScript 将 显示 值 设 为 none， 那 么 想 复原 时 该 怎么 做 呢 ? 这 可 比 它 看 起 来 要 杯 手 得 
Z, BERS T : 


var obj = document.getElementById(^linker^); 
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obj.style.display = ‘none’; 

然后 ， 在 J 中 想 让 这 个 元 素 再 显示 出 来 的 话 ， 你 会 给 它 设置 什 么 值 呢 ? XUCSCIKBLT IU, 
不 是 吗 ?” 如 有 果 是 span 元 么 的 话 ， 你 可 能 希望 这 个 值 是 inline， 而 如 果 是 p (段落 ) 元 素 ， 则 可 能 
布 望 这 个 值 为 block。 话 说 回来 ， 可 能 也 不 是 这 些 值 ， 因 为 你 可 以 很 轻松 地 让 span 生 成 块 状 
(block) 框 或 者 让 aiv 生 成 行内 (inline ) fÉ, 

Pie MAE is PRT Ze, BIAIS ENEE : 

obj.style.display = `“; 

这 会 使 元 系 的 显示 (aisplay ) ERAUR AHTERARCSS'PACRBJMB,. mon PR SINAI Vost HE 
内 置 样式 值 。 

另 一 个 普遍 的 解决 方案 是 不 直接 设置 显示 值 ， 而 是 添加 一 个 可 以 隐藏 元 系 的 类 。 当 你 之 后 需 
要 显示 元 素 的 时 候 , 去 抒 这 个 类 就 可 以 了 。 AMA ULE, 因为 你 需要 编写 (或 者 通过 Google 
找 ) 可 以 添加 和 删除 类 的 JavaScript 人 代码， 不 过 这 确实 是 个 很 有 效 的 解决 方案 。 

那个 固有 的 问题 是 ,，( 截至 扫 写 本 书 之 时 ) 显示 值 为 none 的 元 素 无 法 被 绝 大 多 数 的 辅助 技术 
(EUBA) “看 到 ”。 因 为 元 素 没有 呈现 在 屏 攻 上 ， 所 以 阅 旋 需 无 法 找到 它 ， 更 不 会 谈 出 
它 。 尽 管 有 时 候 这 确实 是 我 们 想 要 的 效果 ， 但 另外 一 些 时 候 ， 也 确实 可 能 不 是 想 要 的 效果 。 

例如 ,假设 在 页 面 中 有 一 个 辅助 链接 (通常 叫做 “ 跳 过 链接 ”"”)， 你 希望 通过 它们 能 让 使 用 
Gras bel sean HJ Ier A Bek SIF EOC, (EAA EE Ee LA SIE. IBA, ARE 
它们 的 容 需 设置 成 aisplay: ”none 的 话 ， 那 它们 就 对 于 所 有 人 都 消失 了 ， 无 论 他 们 视力 正常 与 
否 ， 而 真正 需要 它们 的 人 也 听 不 到 了 。 

类 似 地 ， 如 果 有 一 个 对 视力 正 稼 者 隐 儿 的 下 拉 逐 单 〈 缺少 鼠标 动作 )， 如 果 是 通过 di splay: 
none 隐 藏 的 话 ， 则 屏幕 阅 谱 需 也 无 法 找到 这 个 有 集 单 。 


3.8 抑制 元 素 的 可 见 性 


跟 抑制 元 素 的 显示 方式 类 似 ， 你 可 以 通过 将 visipility (可 见 性 ) 的 值 声明 为 hidqqen 把 元 
素 的 可 见 性 降 为 0。 

.hide {visibility: hidden; } 

该 规则 会 使 元 素 不 可 见 ， 这 可 能 听 上 去 像 是 元 素 没 有 displavy 必 性。 然而， 这 里 有 个 很 关键 
的 差异 : 被 设置 成 visibility: hidaqen 的 元 素 仍 然 参与 页 面 布局 ， 在 图 3-7 中 可 见 一 斑 。 

那么 除了 多 占 了 点 儿 地 方 , 不 可 见 的 元 素 还 有 什么 好 处 吗 ? 用 鼠标 的 人 无 法 与 它 区 互 ， 甚 至 
不 能 通过 键盘 访问 它 ， 并 且 毫 无 疑问 你 也 看 不 到 它 。 那 么 何必 呢 ? 

好 吧 ， 这 对 于 绝对 定位 元 素来 说 没有 什么 问题 ， 因 为 它们 已 经 不 参与 页 面 布 局 了 。( 绝对 定 
位 元 素 位 于 其 他 元 素 的 上 方 ， 并 且 在 对 其 他 元 素 进 行 布局 时 不 被 考虑 在 内 。) 因此 ， 你 可 以 将 它 
们 的 可 见 性 值 在 hidden 和 visible 之 间 随 意 切 换 , 而 这 不 会 影响 页 面 布局 。 一 个 好 人 处 是 , 你 还 可 


CD 即 skip link， 参 见 http://www.jimthatcher.com/skipnav.htm。 
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以 在 不 妨碍 元 素 显 示 角 色 的 情况 下 显示 或 隐藏 它们 ， 从 而 避 开 前 面 草 节 可 到 的 淤 在 问题 。 


eoo Mozilla Firefox 


A fair portion of the feedback I get whenever I talk about microformats runs along the lines of “How is this any different from stuff like 
RDF, besides it being written using a far less structured vocabulary?". Tantek has laid down the basics of the answer to that question. In a 
severely limited nutshell: the more visible the data, the more likely it is to be made relevant and to be kept that way. 


What about search engine spamming? Well, it's usually easily recognizable as such by a human, so that's in keeping with visibility and 
human friendliness. If we suppose a spammer uses CSS to hide the spam from humans, as many do, it's become invisible— exactly the 
same as traditional metadata, and exactly what happened to meta-based keywords before the search engines started ignoring them. Some 
day (soon?) the search engines may start ignoring any content that's been hidden, and as far as I'm concerned that would be just fine. 


Then again, the truth is that the kind of information most people want to consume and manipulate is the kind of information that lends 
itself to being visible. Structuring that data in such a way that the same data is useful to both humans and machines — turning the stuff 
you're showing to people into the stuff that machines process —is a much more elegant approach, and one that frankly stands a higher 
chance of success, at least in the short term. 


(A quick example: as Andy Baio says, “If hCalendar gets popular, Upcoming.org could scrape events off of websites instead of people 
entering them directly into Upcoming". Bands, who are already maintaining their own touring pages, could mark up said pages using 
hCalendar, and Upcoming would just suck in the information. The advantages? The band's webmaster doesn't have to set up the tour page 
and then go enter all the information into Upcoming; he just creates or updates the page and can then ping Upcoming, or wait for its spider 
to drop by. The visible information, which is structured in a machine-parsable way, only has to be updated once. Of course, the same 
would be true with regard to any event aggregator, not just Upcoming, and that's another advantage right there.) 

But will the semantic information stay baked into the visible information? That's a harder trend to forecast. I remember when presentation 


was baked into the structure, and it's been a massive struggle to get the two even partially separated. On the other hand, it makes sense to 
me to pull presentation and structure apart, so that the former can rest upon the latter instead of having them bolted together. I'm not sure it 
nE eS Sense ada the same with semantics and stri Lire 8) ee) SE Wiha tE [Pa means is isk dan’ thin i [112 eS Sense arcu E 


图 3-7 不 可 见 元 素 


遗憾 的 是 ， 同 样 的 无 障碍 访问 问题 仍然 存在 : 被 设置 成 visibility: hidden 的 元 素 会 
被 绝 大 多 数 屏 幕 阅读 侨 所 忽略 ， 而 通过 这 种 方式 隐藏 的 下 拉 菜 单 对 于 可 朗读 的 浏览 絮 也 是 隐 
i H^] o 


3.9 ”将 元 素 移 出 屏幕 


那么 ,如果 想 对 视力 正常 者 隐藏 一 个 元 系 ， 同时 让 屏 大 阅读 带 也 能 识别 的 话 , 该 怎么 做 呢 ? 

里 有 个 办 法 : 

.hide (position: absolute; top: -10000em; left: -10000em;) 

完成 之 后 ， 第 三 段 ( 图 3-7 中 留 有 很 大 一 片 空 日 的 段 洛 ) 其 实 已 经 被 从 页 面 上 移 除 了 ， 如 图 
3-8 TAN o 

是 的 ，CSS 获 取 了 第 三 段 ， 然后 使 它 绝对 定位 ， 青 将 它 移出 了 屏 右 。 这 样 做 会 将 元 系 移 到 视 
野 之 外 , 但 是 至 少 仍 能 被 菜 些 屏 锻 阅 读 带 识别 。 这 就 是 这 种 技术 会 被 当做 隐藏 元 条 的 更 佳 选 择 的 
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A fair portion of the feedback I get whenever I talk about microformats runs along the lines of “How is this any different from stuff like RDF, 
besides it being written using a far less structured vocabulary?". Tantek has laid down the basics of the answer to that question. In a severely 
limited nutshell: the more visible the data, the more likely it is to be made relevant and to be kept that way. 


What about search engine spamming? Well, it's usually easily recognizable as such by a human, so that's in keeping with visibility and 
human friendliness. If we suppose a spammer uses CSS to hide the spam from humans, as many do, it's become invisible —exactly the same 
as traditional metadata, and exactly what happened to met a-based keywords before the search engines started ignoring them. Some day 
(soon?) the search engines may start ignoring any content that's been hidden, and as far as I'm concerned that would be just fine. 


Then again, the truth is that the kind of information most people want to consume and manipulate is the kind of information that lends itself 
to being visible. Structuring that data in such a way that the same data is useful to both humans and machines — turning the stuff you're 
showing to people into the stuff that machines process —is a much more elegant approach, and one that frankly stands a higher chance of 
success, at least in the short term. 


(A quick example: as Andy Baio says, “If hCalendar gets popular, Upcoming.org could scrape events off of websites instead of people 
entering them directly into Upcoming". Bands, who are already maintaining their own touring pages, could mark up said pages using 
hCalendar, and Upcoming would just suck in the information. The advantages? The band's webmaster doesn't have to set up the tour page 


and then go enter all the information into Upcoming; he just creates or updates the page and can then ping Upcoming, or wait for its spider to 
drop by. The visible information, which is structured in a machine-parsable way, only has to be updated once. Of course, the same would be 
true with regard to any event aggregator, not just Upcoming, and that's another advantage right there.) 


But will the semantic information stay baked into the visible information? That's a harder trend to forecast. I remember when presentation 
was baked into the structure, and it's been a massive struggle to get the two even partially separated. On the other hand, it makes sense to me 
to pull presentation and structure apart, so that the former can rest upon the latter instead of having them bolted together. I'm not sure it 
makes sense to do the same with semantics and structure. Of course, what that really means is that I don't think it makes sense to argue for 
their separation now. Perhaps we'll look back in a decade or two and, with new approaches in hand, chuckle over the thought that we'd ever 
bolted them together. Alternatively, perhaps we'll look back from that vantage and wonder why we ever thought the two could, let alone 


should, be separated. 
In either case, it seems clear to me that the way forward is with visible data being used both for human and machine consumption; that is, 


with the microformat approach. It's a lightweight, easily grasped, infinitely extensible, and infinitely flexible solution, totally in keeping with 
the design principles that underpin the Web itself. 


[3-8 ”通过 定位 将 元 素 移 出 屏幕 


然而 从 技术 上 讲 , 你 是 把 元 系 移 到 了 它 的 上 部 , 距离 它 的 左上 角 10 000 em (也 即 1 万 倍 的 元 
系 字 号 大 小 ) Wit, APPR BEEN Ea RA EAN ATO 000 em 的 位 置 上 。 在 很 多 
rl E 包含 块 可 能 是 文档 中 的 其 他 元 
素 。 无 论 哪 种 情况 ， 上 面 的 样式 都 具有 压倒 性 的 优势 ， 它 会 将 元 素 定位 在 视线 之 外 很 远 很 远 的 
地 方 。 

那么 ， 如 果 想 让 它 再 回来 的 话 ， 有 儿 个 选择 可 用 。 如 果 想 让 它 在 可 见 的 时 候 是 绝对 定位 的 ， 
则 可 以 人 简单 地 设置 [cop 和 1left 值 将 它 放 到 特定 的 位 置 上 。 基 本 上 像 是 这 样 . 

.Show {top: 0; left: 0;} 

男 一 方面 ， 如 果 你 想 让 它 回 到 正常 的 文档 流 中 ， 则 可 以 将 它 的 position (定位 ) 属性 设置 
成 CSS 的 默认 值 。 


.Show {position: static;} 


如 果 采 用 这 种 方式 ， 就 不 需要 重 设 top 和 1eft 的 值 了 ， 因 为 在 静态 定位 的 元 素 中 这 些 属性 将 
完全 被 忽略 择 。 无 论 你 是 否 重 设 它 们 ， 都 不 会 有 任何 差异 。 

如 采 想 让 元 素 加 到 正常 的 文科 流 中 ， 但 是 还 需要 让 它 作为 一 个 包含 块 来 包含 其 他 的 元 素 ， 
那么 第 三 种 方法 就 派 上 用 场 了 。 这 种 情况 发 生 在 你 想 要 绝对 定位 一 些 元 系 ， 并 且 这 些 元 系 还 包 
含 在 你 想 移 回 屏幕 的 元 素 内 部 时 。 在 这 样 的 情况 下 ， 可 以 对 元 素 采 用 相对 定位 ， 但 是 必须 声明 
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偏 移 量 。 

.Show {position: relative; top: 0; left: 0;} 

Wat Stop: 0; left: 0; 部 分 ， 则 元 系 会 从 正常 文档 流 中 原始 的 位 置 开始 偏 移 。 这 会 
使 页 面 上 元 素 本 来 应 该 出 现 的 地 方 ( 元 系 没 有 被 同上 和 辐 左 移 10 000 em 时 的 位 置 , 变 成 一 个 “ 洞 ”。 

当然 ， 这 里 你 不 必 一 定 使 用 10 000 em 这 个 值 。 在 一 些 非常 老 的 浏览 硕 中 ， 你 可 以 使 用 不 超过 
65 535 的 任何 数字 ， 而 在 Safari 3 中 这 个 上 限 是 16 777 271， 在 其 余 的 浏览 器 中 则 是 2 147 483 647。 
你 也 可 以 使 用 其 他 任何 有 效 的 CSS 度 量 单位 ， 比 如 相对 高 度 Cem). R (px )、 派 卡 (pica) 和 
英寸 Cinch) 都 可 以 。 关 键 是 要 设置 一 个 非常 大 的 数值 ， 以 确保 你 调用 它 之 前 该 元 素 基 本 上 不 会 
有 任何 机 会 被 看 到 。 


3.10 Elf HR 


图 像 蕉 换 是 CSS 中 生命 力 最 持久 的 设计 技术 之 一 ， 它 是 一 类 人 允许 你 用 图 像 蔡 换文 本 的 技术 ， 
通过 这 种 方式 ,文本 仍然 是 可 打印 、 可 访问 的 。IR (Image Replacement, KRR H ) 一 般 用 在 小 
型 的 、 有 限 的 应 用 上 ， 诸 如 公司 标志 、 页 面 标题 ( 如 图 3-9 所 示 ) 等 。 它 不 适合 用 来 答 换 整 段 的 
文本 。 


eoo Mozilla Firefox = 
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Kat convinced me that I should go out for the evening, despite a metdown of my sinuses this afternoon. Good thing she did, too-- we saw 
comorant fishers in action, which was truly cool. Here's how it works: the fisherman raise comorants from chicks. Then they set out on the 
river at night with five or so of the birds, all perched with the fisherman on a narrow wooden raft. Each bird has a rope tied around its neck to 
exactly the circumference of the bird's neck, thus ensuring that they have no trouble moving or breathing. 


To fish, the birds dive and hunt as they would naturally. When they catch a fish, they return to the boat to eat (again, this is natural behavior; 
comorants eat out of the water). However, the rope tied around the neck prevents them from actually swallowing, so the fisherman just 
removes the fish from the bird's mouth and throws it into a basket. Then bird, still hungry and possibly a bit annoyed about losing its meal, 
dives for more fish. Quite ingeneous, really. We were able to see the birds diving thanks to the river's shallowness, its clarity, and a couple of 
Coleman lanterns hung from the front of the fisherman's boat. It was claimed that these attract bugs, which in turn attract fish, but I didn't see 
a single fish come near the boat. We could see the birds diving, but the only time they caught fish was out in the dark waters beyond the 
range of the lanterns. So the lamps were probably there solely to allow us to see the birds diving. I'm glad they were there; the sight was 
really neat. 


After returning to shore, we had time to shop. Again. Kat ordered a few chops for us, including a large "family" chop for the two of us. I 
waited on the bus. 


图 3-9 ”用 图 像 督 换 标题 
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最 受 欢 迎 的 图 像 替 换 技 术 通常 被 认为 是 Phark， 也 叫 Rundle 方 法 。( 有 多 受 欢迎 ? 有 人 特地 为 
它 制作 T 恤 呢 。) 基本 上 你 需要 做 的 就 是 ， 使 用 负 的 文本 纵 进 把 文本 移 到 元 系 的 左 侧 。 


hl (height: 140px; text-indent: -9999px; 
background: url (page-header.gif);} 


这 在 很 多 方面 类 似 于 使 用 绝对 定位 隐 泸 整个 元 素 的 技巧 , 但 是 相反 地 , 实际 上 此 处 我 们 是 在 
没有 移动 元 素 框 的 情况 下 将 元 系 的 文本 内 容 移 到 了 屏幕 之 外 。 

注意 ,背景 图 像 儿 乎 是 不 会 被 打印 的 。 打 吨 背 景 的 选项 是 有 的 ,但 是 默认 是 不 打印 背景 图 
的 ， 而 且 几 乎 没有 人 更 改过 这 个 选项 。 因 此 ， 在 打印 样式 表 (〈 详 见 3.11 节 ) 中 ， 可 以 简单 地 这 
EES : 

hl {text-indent: 0; background: none;} 

ix background: none 只 是 个 预防 措施 ， 几 乎 没 人 会 开局 打印 背景 图 的 选项 。 不 过 ， 为 了 
以 防 万 一 还 是 应 该 这 么 做 ， 因 为 这 可 以 避免 一 级 标题 (n1) 文本 被 打印 在 背景 图 像 上 。 

有 一 种 极端 的 情况 可 能 会 使 这 种 替换 方法 失败 ， 即 当 用 户 的 浏览 右 人 允许 使 用 CSS 但 却 禁止 显 
示 图 像 时 ， 而 更 普遍 的 情况 是 当 图 像 由 于 某 种 原因 而 没有 载 人 时 。 如 图 3-10 所 示 ,， 在 这 些 情况 下 
标题 文本 会 消失 ， 但 不 会 被 背景 图 像 蔡 换 。 


eoo Mozilla Firefox = 


Kat convinced me that I should go out for the evening, despite a metdown of my sinuses this afternoon. Good thing she did, too-- we saw 
comorant fishers in action, which was truly cool. Here's how it works: the fisherman raise comorants from chicks. Then they set out on the 
river at night with five or so of the birds, all perched with the fisherman on a narrow wooden raft. Each bird has a rope tied around its neck to 
exactly the circumference of the bird's neck, thus ensuring that they have no trouble moving or breathing. 


To fish, the birds dive and hunt as they would naturally. When they catch a fish, they return to the boat to eat (again, this is natural behavior; 
comorants eat out of the water). However, the rope tied around the neck prevents them from actually swallowing, so the fisherman just 
removes the fish from the bird's mouth and throws it into a basket. Then bird, still hungry and possibly a bit annoyed about losing its meal, 


dives for more fish. Quite ingeneous, really. We were able to see the birds diving thanks to the river's shallowness, its clarity, and a couple of 
Coleman lanterns hung from the front of the fisherman's boat. It was claimed that these attract bugs, which in turn attract fish, but I didn't see 
a single fish come near the boat. We could see the birds diving, but the only time they caught fish was out in the dark waters beyond the 
range of the lanterns. So the lamps were probably there solely to allow us to see the birds diving. I'm glad they were there; the sight was 
really neat. 


After returning to shore, we had time to shop. Again. Kat ordered a few chops for us, including a large "family" chop for the two of us. I 
waited on the bus. 


图 3-10 ”图 像 不 可 用 时 的 效果 
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目前 大 约 有 十 几 种 图 像 奉 换 技术 ”， 每 种 都 有 自己 独特 的 问题 解决 方法 。 有 一 些 是 把 元 素 的 
内 容 放 到 一 个 span 里 ， 并 抑制 span 的 显示 或 者 将 span 移 到 屏 才 之 外 ， 另 外 一 些 会 让 你 增加 额外 
的 图 像 作 为 背景 图 像 的 镜像 内 容 ”。 

这 里 有 个 值得 一 提 的 图 像 蔡 换 技术 ， 即 将 图 像 作 为 内 容 ， 例 如 : 

«hl»«img src="page-header.gif" alt="Dive Into Fishing"></h1> 

在 这 种 情况 下 ,图 像 在 屏幕 上 和 打印 时 都 会 出 现 ,因为 浏览 大 会 打印 作为 内 容 的 图 像 。 这 对 
于 屏 妖 阅读 硕 也 很 友好 ， 因 为 阅读 本 可 以 识别 图 像 的 蔡 代 文本 (alt) 同样 ， WRAP ERA 
图 像 ， 或 者 某 些 情况 下 人 允许 载 人 图 像 但 由 于 某 种 原因 而 未 能 载 人 ， 这 种 方法 也 会 失败 。 此 时 ， 图 
像 的 蔡 换 文本 应 该 会 显示 在 图 像 的 位 置 上 。 


3.11 打印 样式 


如 果 你 还 没有 创建 过 打印 样式 , 那么 是 时 候 好 好 考虑 一 下 了 。 即便 和 希望 站 点 看 上 去 跟 屏 幕 上 
表现 基本 一 致 , 与 很 可 能 没有 任何 背景 频 色 或 图 片 的 灰 度 输出 相 比 , 你 仍然 可 以 信 此 机 会 优化 一 
下 颜色 对 比 度 。 

做 法 很 简单 ， 有 3 种 方式 可 以 将 打印 样式 关联 到 页 面 : 


<style type="text/css" media="print">..</style> 


<link type="text/css" rel="stylesheet" media="print" 
href="print.css"> 
@import urliprint.css) print; 


几乎 所 有 人 都 会 使 用 1ink 的 方式 ， 这 是 因为 在 每 个 页 面 中 都 散人 打印 样式 表 的 效率 非常 低 ， 
并 且 导 入 打印 样式 表 需 要 在 每 个 页 面 郡 能 人 一 个 样式 表 。 此 外 , 还 有 长 期 存在 的 关于 引入 打印 样 
ARMA EARR o 

TETI PEERK rf n] ERME ERRER RAAR EE L31070) TRIN, MARERE 
SOAS FR ETA ES HY the TP BY ES, 因为 深 色 育 景 上 的 日 色 文 本 几乎 不 可 避免 地 会 变 成 日 色 纸张 
上 的 日 色 文本 ， 那 一 定 很 难 分 辨 了 。 

之 所 以 发 生 这 种 情况 是 因为 育 景 图 片 和 育 景色 几乎 从 来 不 会 被 打印 出 来 .尽管 在 所 有 现代 浏 
览 囊 中 郡 有 打印 育 景 的 选项 ,但 先 认 是 不 打印 育 景 的 。 如 末 你 仔细 想 想 的 话 ， 这 个 对 认 选项 其 实 
挺 合理 的 。( 设想 一 下 当 你 打印 了 10 页 深蓝 色 育 景 日 色 文 本 的 页 面 时 ， 打 印 机 的 墨盒 会 是 什么 效 
R? ) 几乎 没 人 更 改 这 个 设置 , 因此 你 可 以 假定 打印 出 来 的 部 是 没有 背景 的 。 所 以 , 最 好 还 是 把 
打印 样式 中 的 图 像 移 除 吧 。 

你 可 以 采用 这 种 一 天 永 逸 的 方式 : 


* ibackground: transparent; color: black} 


(D TÉ W.http://css-discuss.incutio.com/wiki/Image Replacement. 
(2) —*PharkH DP EAI, FEM http://css-tricks.com/css-image-replacement/"# Technique #4 部 分 。 
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或 者 也 可 以 列 出 全 部 需要 调整 的 元 素 ， 像 这 样 : 


body, #navbar, #aside, .warning, .blockquote { 
background: transparent; color: black; } 


3.12 开发 打印 样式 


那么 ,到 的 开发 打印 样式 的 最 佳 方 式 是 什么 呢 ?” 当 然 是 在 浏览 冀 中 进行 开发 了 , 除非 你 愿意 
无 数 次 地 选择 打印 预览 来 进行 调试 。 下 面 会 介绍 具体 的 做 法 。 

你 或 许 已 经 有 了 一 两 个 用 于 浏览 夯 布 局 的 样式 表 , 我 们 假设 它们 已 经 被 链接 到 页 面 中 了 , 就 
像 这 样 : 
<link type="text/css" rel="stylesheet" href="basic.css"> 
«link type="text/css" rel="stylesheet" href="theme.css"> 


尽管 它们 的 表意 不 是 很 明确 ， 但 是 两 个 样式 表 都 会 应 用 在 所 有 媒介 中 ， 这 和 标记 中 包含 
media="all" 的 效果 是 一 模 一 样 的 。 


<link type="text/css" rel="stylesheet" href="basic.css" media="all"> 


<link type="text/css" rel="stylesheet" href="theme.css" media="all"> 
那么 第 一 个 问题 是 : 你 是 否 硕 望 将 这 些 样式 应 用 在 打印 中 呢 ? WR NAPE, 那么 你 或 许 
要 把 al11 改 成 screen 才 行 。 


<link type="text/css" rel="stylesheet" href-"basic.css" media="Screen"> 
<link type="text/css" rel="stylesheet" href="theme.css" media="Screen"> 


好 了 ， 这 个 是 默认 的 情况 。 对 此 ， 你 可 能 还 需要 添加 一 个 打印 样式 表 : 


<link type="text/css" rel="stylesheet" href="basic.css" media="Screen"> 
<link type="text/css" rel="stylesheet" href-"theme.css" media="Screen"> 
<link type="text/css" rel="stylesheet" href="print.css" media="print"> 


很 好 ! 不 过 ， 当 你 在 浏览 器 中 刷新 页 面 时 不 会 发 生 任 何 变化 ， 因 为 要 用 屏幕 (screen) W 
介 查 看 页 面 。 可 能 你 并 不 希望 每 次 更 改 CSS 后 都 打开 打印 预览 ， 而 且 肯 定 也 不 想 每 次 调整 完 样 式 
表 后 都 把 页 面 打印 出 来 ， 你 需要 的 只 是 让 打印 样式 展示 在 屏幕 上 。 

那么 解决 办 法 就 是 ， 将 这 些 打印 样式 应 用 到 屏幕 媒介 上 ， 把 其 他 的 屏幕 样式 取消 ， 如 图 3-11 
所 示 。 因 此 , 需要 把 print 改 为 screen 并 且 把 原来 存在 的 screen 值 改 为 其 他 的 media 值 。 我 一 般 
会 使 用 tty 这 个 值 , 因为 这 是 我 能 想到 的 跟 screen 最 不 搭 边 的 媒介 了 , 并 且 它 很 短 , 输入 很 方便 。 
请 看 下 面 的 示例 : 


<link type="text/css" rel="stylesheet" href="basic.css" media="tty"> 
<link type="text/css" rel="stylesheet" href="theme.css" media="tty"> 
<link type="text/css" rel="stylesheet" href-"print.css" media="Screen"> 


PEL n] LA TAD NSS ARERR T , 你 可 以 欢快 地 刷新 页 面 进行 调试 直到 达到 满意 的 效 
果 为 止 。 当 完成 这 些 之 后 ， 只 需要 把 screen 改 回 print 并 把 tty 改 回 screen， 届 时 你 就 可 以 打印 
以 确保 没有 任何 问题 了 。 


To All Who Seek It 


~ Thu 12 Nov 2009 ~ 


It wasn’t what I would call unseasonably cold, but then the season was mid-autumn and the afternoon wind along the river did cut the skin 
a bit. I kept my leather jacket zipped up all the way as I made my way back to the hotel with shopping bag in hand. Brisk, I might have 
said back home, or even chilly. Not winter yet, but you could feel it coming in the snap and shift of the air. 


I crossed the last street before the hotel, keeping an eye on both the short-cycle light and the short-tempered traffic. Not that there 
was any particular reason for them to be short-tempered—it was a Sunday afternoon and there were hardly any cars on the bridges and 
roads that grid the downtown area—but I knew from experience that pedestrian intimidation was something of a sport for the locals, and I 
really didn’t feel like tempting fate, or at least somebody’s ideas about what constituted a bit of fun. 


Having threaded through the small bunch of oncoming pedestrians and reached the relative safety of the sidewalk, I came upon a 
large man with two children in tow, all bundled against the cold in parkas and scarves and hats. He asked if I had a minute, and I 
immediately knew what was coming. Sure enough, it came out: the request for a dollar, some change, anything I could spare. I glanced at 
him, at the children, back at him. Something for bus fare, he said. They’d missed dinner at the Mission the night before, he said. Just a 
little help, anything I could do, he said. 

How many times had I heard this before? I gave the usual excuses about not having any cash, I only travel with credit cards, so 
sorry, had to go. 

And went, the wind biting into my cheeks as I strode to the hotel’s front door, the overhead heater blowing a curtain of warmth 
across the entryway. Into the lobby. Into the elevator. Thirty floors into the air. And in my sight, still, the children looking at me. The boy 
of maybe eight, looking up at me curiously. The girl of six, peeping at me warily from behind the man’s bulk. Props? Accomplices? 

Did it matter? 

I stood at the counter of the lobby gift shop, stacks of nutrition bars in my hands. A bottle of water in the side pocket of the jacket I 
had yet to shed. An apple in the other. My credit card between two fingers, ready for the attendant to take. 

Through the doors, into the cold wind under the canopy, the plastic shopping bag weighing down my hand. I reached the sidewalk 
and there they were on the same corner, looking like they were getting ready to cross the street. I caught the man’s eye, signaled him to 
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玩 转 aisplay 属 性 是 使 用 最 少 的 标记 创建 有 趣 布局 的 基石 之 一 ,而 这 些 奇 技 之 一 就 是 使 通 篆 
会 生成 行内 框 的 超 链接 生成 一 个 块 级 框 。 

为 了 理解 其 原理 , 考虑 页 面 侧 边 栏 上 的 一 个 链接 列表 。 这 些 可 能 全 部 是 无 序列 表 ，, 每 个 列表 
项 对 应 一 个 链接 ,或 者 其 他 类 似 的 结构 。 事实 上 ,可 以 考虑 两 个 相同 的 链接 列表 ， 而 唯一 的 不 同 
就 是 一 个 列表 拥有 块 级 链接 ， 男 外 一 个 没有 如 图 3-12 所 示 ) 现在 我 们 为 链接 设置 背景 ， 以 使 
差异 更 明显 一 些 。 


图 3-12 ” 块 级 和 非 块 级 的 链接 列表 


行内 链接 对 于 用 户 来 说 不 太 友 好 ,因为 它 的 可 单 击 区 域 太 小 了 。 相 应 地 ， 如 采 我 们 想 为 链接 
ARR, WAT AEE Aes "uite" OCYBOIHUJTPxt. INANE MIE. 
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设置 块 级 链接 其 实 非常 简单 : 

#sidebar ul a (display: block;) 

IX Wise EL 3-12 p Bir URBE Br ERI ALTE T o 

当 链 接生 成 块 级 框 的 时 候 ， 它 跟 段 落 、 标 题 、aiv 等 生成 的 框 表现 完全 相同 ， 因 为 它们 都 是 
同样 类 型 的 框 。 你 也 可 以 给 它 设置 内 边 距 、 外 边 距 以 及 其 他 任何 属性 


3.14 外边 距 还 是 内 边 


你 有 没有 想 过 (我 的 意思 是 真正 的 思考 过 ) 列表 的 缩 进 ”或 者 是 页 面 周围 默认 的 “ 效 订 距 
A? 如 采 答 案 是 肯定 的 , 那 你 有 没有 想 过 它们 是 如 何 创建 出 来 的 呢 ? 本 来 就 没有 统一 的 标准 呀 。 

那么 让 我 们 从 页 面 内 容 周 围 的 空 昌 开始 讲述 吧 。 正如 大 部 分 人 所 知 的 ， etre hits 
窗口 的 边 绿 之 间 大 约 有 8 px 的 空 日 。 如 图 3-13 所 示 ， 你 可 以 通过 重 置 样式 移 除 这 个 空 日 ， 或 者 下 
接 给 页 面 poqy 元 素 设 置 样式 。 不 过 ， 怎 样 为 它 设 置 样式 呢 ? 是 移 除 外 边 距 ， 


eoo Mozilla Firefox = 


A fair portion of the feedback I get whenever I talk about microformats runs along the lines of “How is this any different from stuff like RDF, besides it 
being written using a far less structured vocabulary?”. Tantek has laid down the basics of the answer to that question. In a severely limited nutshell: the 
more visible the data, the more likely it is to be made relevant and to be kept that way. 


What about search engine spamming? Well, it’s usually easily recognizable as such by a human, so that’s in keeping with visibility and human 

friendliness. If we suppose a spammer uses CSS to hide the spam from humans, as many do, it’s become invisible—exactly the same as traditional | 
metadata, and exactly what happened to meta-based keywords before the search engines started ignoring them. Some day (soon?) the search engines may | 
start ignoring any content that’s been hidden, and as far as I’m concerned that would be just fine. 


Now, what about farther down the road — will semantic information always have to be visible? An interesting question. Tantek and I have had some pretty | 
energetic arguments about whether the kind of stuff we’re putting into microformats will eventually move into the invisible realm of Semantic Web-style 
metainformation. As you might guess from his post, Tantek says no way; I’m more agnostic about it. Not every case of structured data lends itself to being | 
visible, and in fact making some kinds of strucuring data visible would be distinctly human-unfriendly. There’s a reason browsers don’t (by default) 
display a page’s markup. 


Besides, to some extent there’s invisible information in microformats, although it’s pretty much always tied to visible information (dates in hCalendar 
being one such example). Sure, the class names and title values are there in the markup as opposed to off in some other file, but from a user point of 
view, they’re as invisible as meta keywords or RDF. Usually it’s stuff we don’t want to be in the user’s face: markers telling which bits of content 
correspond to what, ISO versions of human-readable dates, that kind of thing. 


Then again, the truth is that the kind of information most people want to consume and manipulate is the kind of information that lends itself to being 
visible. Structuring that data in such a way that the same data is useful to both humans and machines — turning the stuff you're showing to people into the 
stuff that machines process—is a much more elegant approach, and one that frankly stands a higher chance of success, at least in the short term. | 


(A quick example: as Andy Baio says, “If hCalendar gets popular, Upcoming.org could scrape events off of websites instead of people entering them 
directly into Upcoming”. Bands, who are already maintaining their own touring pages, could mark up said pages using hCalendar, and Upcoming would 
just suck in the information. The advantages? The band’s webmaster doesn’t have to set up the tour page and then go enter all the information into 
Upcoming; he just creates or updates the page and can then ping Upcoming, or wait for its spider to drop by. The visible information, which is structured 
in a machine-parsable way, only has to be updated once. Of course, the same would be true with regard to any event aggregator, not just Upcoming, and 
that’s another advantage right there.) 


But will the semantic information stay baked into the visible information? That’s a harder trend to forecast. I remember when presentation was baked into 
the structure, and it’s been a massive struggle to get the two even partially separated. On the other hand, it makes sense to me to pull presentation and 
structure apart, so that the former can rest upon the latter instead of having them bolted together. I’m not sure it makes sense to do the same with semantics 
and structure. Of course, what that really means is that I don’t think it makes sense to argue for their separation now. Perhaps we’ll look back in a decade 
or two and, with new approaches in hand, chuckle over the thought that we'd ever bolted them together. Alternatively, perhaps we'll look back from that — 4 
vantage and wonder wh we ever thought the two could, let alone should, be separated Y 


图 3-13 ”文档 内 容 周围 装订 距离 的 一 个 特写 


如 果 希 望 它 是 跨 浏 览 紫 友好 的 ， ia 这 是 因为 大 部 分 浏览 器 都 会 通过 
外 边 距 创建 8 px 的 装订 距离 ， 而 只 有 Opera 会 使 用 内 边 

现在 ， M A O et MEE 因为 并 没有 相关 
规范 明确 地 说 明 应 该 如 何 创 建 装 订 距 离 (或 确实 应 该 有 个 规范 )。 我 们 有 着 强 有 力 的 论据 可 以 证 


D 关于 挪威 的 诅咒 ， 参 见 http://everything2.com/title/North+Norwegiant+swearwordst+and+curses。 
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明 使 用 内 边 距 要 好 过 使 用 外 边 距 。 然 而 ,这 真 的 无 所 请 了 ,因为 浏览 大 之 间 根 本 无 法 统一 。 所 以 
还 是 这 样 写 吧 .: 

body {padding: 0; margin: 0;} 

这 会 消除 所 有 浏览 锅 的 装订 距离 。( 好 吧 ， 除 了 Netscape 4， 不 过 你 不 会 介意 吧 ? ) 

类 似 地 , 无论 是 有 序列 表 还 是 无 序列 表 的 缩 进 , 都 可 以 使 用 外 边 距 或 者 内 边 距 实现 ,具体 取 
APN Aaro AE, UMRIE H F An PEEN : 

ul, ol {margin-left: 0;} 

则 会 移 除 一 些 浏 览 帮 PEERAA) IRAE UIS ERN A aR, AB ens 
要 同时 去 掉 左 内 边 距 : 

ul, ol {margin-left: 0; padding-left: 0;} 

当然 ， 你 不 止 可 以 移 除 缩 进 。 一 且 习 惯 了 同时 设置 左 外 边 距 和 左 内 边 距 来 改变 列表 的 缩 进 ， 
孢 可 以 确定 哪些 组 合 最 适合 你 了 。 可 能 你 认为 所 有 的 浏览 大 都 应 该 使 用 内 边 距 对 列表 进行 缩 进 ， 
JG A 3 : 

ul, ol (margin-left: 0; padding-left: 2.5em;} 

或 者 你 可 能 想 分 别 设 置 : 

ul, ol {margin-left: 1.25em; padding-left: 1.25em;} 
或 者 全 部 使 用 外 边 距 ， 因 为 干 挥 内 边 距 才 是 你 的 最 爱 : 

ul, ol {margin-left: 2.5em; padding-left: 0;} 

很 多 情况 下 ,具体 是 怎么 实现 的 并 不 重要 。 然 而 ， 如 果 为 列表 设置 了 背景 , 那么 如 何 实 现 就 
瞬间 变 得 重要 了 (如 图 3-14 所 示 )。 这 很 大 程度 上 是 因为 列表 的 标记 AR DR, FE F, 
或 者 其 他 什么 ) 是 被 放 在 每 个 列表 项 一 边 的 ， 就 好 像 被 绝对 定位 在 那里 似 的 。( 它们 实际 上 不 是 
被 绝对 定位 的 ,但 是 效果 却 与 绝对 定位 非常 相似 。) 因此 ， 它 们 会 落 在 列表 的 左 内 边 距 或 外 边 中 
或 者 其 他 任何 东西 的 上 面 。 如 采 你 希望 将 它们 置 于 可 见 的 背景 内 部 , 那么 就 要 使 用 内 边 距 实现 缩 
进 。 如 果 你 希望 将 它们 挂 在 远离 背景 的 外 部 ， 就 使 用 外 边 距 来 实现 。 


图 3-14 ”列表 缩 进 技术 对 比 
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3.15 ” 凸 排 列表 


我 们 刚刚 在 讨论 的 是 列表 缩 进 , 但 是 现在 讨论 的 是 …… 凸 排 ? 这 是 个 专 有 名 词 吗 ? 或 许 根本 
不 是 ,但 是 总 比 所 谓 的 “悬挂 缩 进 ”要 好 些 ， 那 也 是 一 个 用 来 表达 这 种 情况 的 词语 ， 但 是 根本 之 


意义 。 
我 们 这 里 讨论 的 是 能 使 列表 项 的 第 一 行 悬 挂 在 左 侧 , 并 使 其 他 行 保持 在 原 位 的 一 种 技术 ,如 


图 3-15 所 示 。 
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So why not use JavaScript to do that, or to just replace the tables with canvas-drawn charts? I did consider both, but decided that I would 
push as far as I could with plain HTML+CSS. 


A few implementation notes: 


I used HTML 5 in order to step around some previously unrealized limitations of HTML 4 一 did you know tfoot has to come before 
tbody in HTML 4? 7 didn’t. I did not use elements like header and footer due to known problems in Firefox 2 and related 
browsers, which mangle pages containing those elements. Instead, I took the same path Jon Tan recommends, and classed divs using 


those names for later, easier conversion. 


The tables which underlie the charts do not have summary attributes. If a group of civic-minded individuals would like to write useful 
summaries, please let me know in the comments and I'll let you know how best to submit them. Similarly, I did my very best to 
make sure all the table headers had accurate scope values, but if I botched any, let me know. 


I’m aware that Opera shows horizontal scrollbars on most chapters of the report. This is due to its refusal to apply overflow to table 
boxes, which according to my recent reading of the CSS 2.1 specification is the correct thing to (not) do. Every other browser I 
tested does apply overflow to table boxes, though, which I found most useful. I tried applying overflow: hidden to a few other 
boxes, and that got rid of Opera’s horizontal scrollbars, but it also cut off actual content in some other browsers. I chose a cosmetic 
problem in one browser over loss of content in others. The best fix I’ve devised is to wrap the tables in divs and apply overflow: 
hidden to those divs, but I didn’t want to rush the fix and botch it, so it didn’t make it in time for first publication. I expect to get it 
in shortly after publication. 


In a like vein, there are a few combo charts where a bar goes shooting off the right side of the chart in IE7. This appears to be due to some 
kind of width-doubling problem that’s only invoked on elements with a style attribute when the row header goes to two lines 
instead of being just one. Googling for an explanation yielded no joy, and a lengthy series of attempts to hack around the problem 
came to nothing. If anyone knows how to counteract that problem other than preventing the header text from going past a single line, 
I'd love to hear it. (Update: I've implemented the “fix” of preventing line-wrapping in the report, so there aren't any off-the-page 
bars right now, but you can see an example of the problem on this test page.) 

Surprisingly, the charts mostly work in IE6. The exception is some of the triple-stack charts, where data points overlap when the 
rightmost sub-bars get too small, and also the double-width bars mentioned in the previous point. I don’t really have a fix for this 
short of upgrading the browser, but if somebody finds one, I'd be happy to test it out. 


On that last point, if there are questions or suggestions surrounding the implementation of the report, we can certainly discuss them here. 
With regard to the survey and report itself, though — that is, the questions sked and the results we're P DeC direct those 
phts to the comments section of the ALA article announcing the report. Ding 


图 3-1$ PSHE 


这 个 效果 非常 好 , 它 可 以 使 你 很 容易 区 分 每 个 列表 项 , 而 不 用 使 用 项 目 符号 或 者 其 他 什么 的 
弄 乱 页 面 ， 同 时 它 也 很 容易 实现 。 

ul {text-indent: -2em; list-style: none;} 

就 是 这 样 了 ， 注 意 我 在 样式 中 包含 了 list-style: none 这 条 规则 ， 如 果 没 有 这 个 的 话 ， 则 
每 个 列表 项 的 第 一 行驶 不 会 被 凸 排 ， 并 且 文 本 会 跟 列表 标记 重合 。 因 此 , 不 要 把 凸 排 和 列表 标记 
IU HH. 

SPR, PRATT PETAR Pa, PLE. BL. div. pre ARAT, RAEE 
列表 中 比较 稼 见 而 已 。 
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3.16 ”为 列表 添加 标记 


有 很 多 方式 可 以 为 列表 添加 项 目标 记 。 最 简单 的 ， 然 而 也 是 最 不 精确 的 方式 ， 就 是 使 用 CSS 
内 置 的 列表 样式 属性 了 。 

比方 说 我 们 有 一 个 地 球 周围 的 行星 列表 , 我 们 希望 每 个 列表 项 都 有 一 个 小 星星 的 标记 ， 而 不 
征 圆 辫 、 圆 点 或 者 方块 什么 的 《如 图 3-16 所 示 )。 


ul.stars{list-style-image: url(star.gif) ;} 


* The Sun 

* V645 Centauri (Proxima Centuari) 
* Alpha Centauri A 
* Alpha Centauri B 
* Barnard's Star 
* Wolf 359 

* Lalande 21185 

* Sirius A 

* Sirius B 

* Luyten 726-8 A 
* Luyten 726-8 B 
* Ross 154 

* Ross 248 

* Epsilon Eridani 
* Lacaille 9352 

* Ross 128 

* EZ Aquarii A 

* EZ Aquarii B 

* EZ Aquarii C 

* Procyon A 

* Procyon B 


图 3-16 用 星 号 装饰 的 行星 列表 


这 只 不 过 是 小 亲 一 碟 儿 黑 了 , 但 是 潜在 的 缺点 就 是 你 完全 无 法 向 控 图 像 的 放置 位 置 。 它 们 距 
离 列表 项 文本 左 侧 边 绿 的 距离 ， 以 及 它们 相对 第 一 行 的 垂直 对 齐 等 ,完全 受 欣 于 浏览 锅 ， 你 一 点 
儿 办 法 都 没有 。 

现在 , 假设 你 只 想 使 用 最 普通 的 列表 标记 ， 比 如 圆 点 状 的 标记 , 但 希望 这 个 标记 与 列表 项 的 
内 容 具 有 不 同 的 颜色 C 如 图 3-17 所 示 )。 

很 遗憾 , 这 还 需要 一 些 结构 上 的 改进 才 行 。 你 需要 将 每 个 列表 项 的 内 容 用 一 个 元 素 包 右 一 下 ， 
这 个 元 紊 可 以 是 aiv 或 者 span， 这 里 我 用 aiv 进 行 演示 。 

ul.stars {color: red; list-style: disc;} 

ul.stars div {color: black;} 


<ul class="stars"> 

<li><div>The Sun</div></li> 

<li><div>V645 Centauri (Proxima Centuari)«/div»«/li- 
<li><div>Alpha Centauri A«/div»«/li» 


«/ul» 


3.17 通过 背景 实现 列表 标记 了 


+ The Sun 

* V645 Centauri (Proxima Centuari) 
* Alpha Centauri A 
» Alpha Centauri B 
ə Barnard's Star 

e Wolf 359 

e Lalande 21185 

e Sirius A 

» Sirius B 

e。 Luyten 726-8 A 

* Luyten 726-8 B 

e Ross 154 

e Ross 248 

* Epsilon Eridani 

ə Lacaille 9352 

* Ross 128 

* EZ Aquarii A 

* EZ Aquarii B 

« EZ Aquarii C 

e Procyon A 

* Procyon B 


图 3-17 ”改变 列表 标记 的 颜色 


在 这 种 特定 的 情况 下 ， 我 们 可 以 把 aiv 改 成 span， 而 不 会 对 结果 产生 任何 实质 影响 。 不 过 ， 
如 果 我 们 和 希望 再 增添 一 些 边框 或 者 背景 的 话 ， 那 么 两 者 之 间 就 会 有 巨大 的 差异 了 。( 当然 了 ， 你 
可 以 使 用 aisplay 来 消除 这 种 差异 。) 

你 或 许 认 为 CSS 可 能 有 办 法 在 不 增加 多 余 元 素 的 情况 下 单独 设置 列表 标记 的 样式 , 事实 上 你 
是 对 的 。 不 过 问题 是 ， 浏览 右 从 来 没有 实现 过 它们 ， 所 以 它们 也 就 无 关 紧要 了 。 


3.17 Wa RR RIC 


那么 你 是 想 目 定义 列表 标记 的 图 像 ， FIFA AMEE DI Dias “BED TC” MEEME S o Be 
关系 ， 只 需要 关 挥 列表 标记 ， 然 后 把 图 像 设 置 成 列表 项 的 背景 ( 如 图 3-18 所 示 )。 


ul.stars {list-style: none;} 


ul.stars li (background: url(star.gif) 0 0.1em no-repeat; 
padding-left: 16px; } 


Hay ERMER tm EE. KARIR Ta EA list-style-imagefHlt, fK 
会 拥有 更 大 的 灵活 性 。 当 然 , M BEIT 2A UE Pe, AIDC AR AAS ae ET 
AAA E. 

如 有 果 你 想 让 背景 图 和 第 一 行文 本 对 齐 的 话 , 那 就 需要 点 儿 技 术 了 , 而且 你 也 没 法 保证 精确 到 
像 系 级 的 对 齐 ， 即 精确 对 齐 到 第 一 行文 字 的 基线 。 尽 管 可 以 做 到 很 接近 ， 而 且 在 很 多 情况 下 位 置 
也 是 正确 的 , 但 是 你 永远 也 不 能 打包 票 。 在 这 些 情况 下 ,你 不 得 不 接受 这 些 潜在 的 缺陷 , 或 者 尝 
试 其 他 不 同 的 方法 。 

这 种 特殊 方法 的 一 个 好 处 就 是 , 你 不 必 局 限于 第 一 行文 本 , 你 可 以 使 列表 标记 相对 于 整个 列 
表 项 和 五 直 居 中 ， 即 使 列表 项 有 很 多 行 也 没 问 题 。 正 如 图 3-19 中 展示 的 ,结合 列表 项 之 间 的 边框 可 
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以 做 出 非常 漂亮 的 效果 。 


图 3-18 ”通过 背景 实现 的 列表 标记 


图 3-19 垂直 居中 的 背景 图 标记 


3.18 ”生成 列表 标记 79 


如 打 你 想 为 东 些 类 型 的 列表 项 单独 设置 茶 种 标记 〈 如 网 3-20 所 示 )， 那 么 可 以 简单 地 对 列表 
项 分 类 ， 然 后 引入 新 的 背景 图 像 。 


ul.stars {list-style: none; } 

ul.stars li {background: 0 0.1em no-repeat; 
padding-left: 16px;} 

ul.stars li.m {background-image: url(star-m.gif) ;} 

ul.stars li.k {background-image: url(star-k.gif) ;} 


«ul classs"'stars'» 

«li class="g">The Sun«/li» 

<li class="m">V645 Centauri (Proxima Centuari)«/li- 
«li class="g">Alpha Centauri A</1i> 

<li classs'"k'-Alpha Centauri. B«/lri- 


</ul> 


vr The Sun 

* V645 Centauri (Proxima Centuari) 
*r Alpha Centauri A 

* Alpha Centauri B 

* Barnard's Star 

* Wolf 359 

* Lalande 21185 

vr Sirius A 

vr Sirius B 

* Luyten 726-8 A 


* Luyten 726-8 B 
* Ross 154 

* Ross 248 

* Epsilon Eridani 
* Lacaille 9352 


* Ross 128 

* EZ Aquarii A 
* EZ Aquarii B 
* EZ Aquarii C 
vr Procyon A 

vr Procyon B 


图 3-20 多样 的 背景 图 标记 
这 种 方式 有 个 缺点 :图 像 是 设置 在 背景 中 的 ,所 以 对 于 绝 大 多 数 用 户 来 说 并 不 会 被 打印 出 来 。 
因此 ， 你 需要 在 打印 样式 表 中 声明 正 筑 的 列表 标记 或 者 采取 一 些 其 他 类 似 的 措施 。 


3.18 生成 列表 标记 


还 有 一 种 更 加 高 级 的 方法 可 以 实现 目 定 义 的 列表 标记 , AN EE BE B UI Vs d EB BSL 
持 的 。 这 种 方法 是 通过 混合 凸 排 和 生成 内 容 来 实现 的 ( 如 图 3-21 所 示 )。 


ul.stars li:before {content: url(star.gif) ;margin-right: 8px;} 


ul.stars li {text-indent: -20px; list-style: none; } 


The Sun 

V645 Centauri (Proxima Centuari) 
Alpha Centauri A 
Alpha Centauri B 
Barnard's Star 
Wolf 359 

Lalande 21185 
Sirius A 

Sirius B 

Luyten 726-8 A 
Luyten 726-8 B 
Ross 154 

Ross 248 

Epsilon Eridani 
Lacaille 9352 


+ + + + + + tH HH HF H HH HF + HH HF 


图 3-21 生成 列表 标记 


IRA th) HL, 完全 不 需要 座 加 任何 额外 的 元 素 , 因为 生成 内 容 可 以 很 高 效 地 把 目 己 添加 到 每 
个 列表 项 的 内 容 之 前 。 这 意味 着 图 像 被 当做 行内 的 内 容 搬入 了 , 因此 你 可 以 把 它 相 对 于 文本 的 基 
线 或 者 相对 于 其 他 位 置 垂 二 对 齐 。 

当然 ， 还 可 以 添加 特殊 的 类 来 单独 设置 东 个 图 标 〈《 如 图 3-22 所 示 )。 


ul.stars li.m:before (content: url(star-m.gif) ; 


} 
ul.stars li.k:before (content: url(star-k.gif) ;} 


The Sun 

V645 Centauri (Proxima Centuari) 
Alpha Centauri A 

Alpha Centauri B 

Barnard's Star 

Wolf 359 

Lalande 21185 

Sirius A 

Sirius B 

Luyten 726-8 A 


Luyten 726-8 B 
Ross 154 

Ross 248 
Epsilon Eridani 
Lacaille 9352 


+ OX tO EP OO Ot OO X 


图 3-22 ”生成 多 种 不 同 的 标记 
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因为 这 些 已 经 插入 到 页 面 的 内 容 中 了 ， 所 以 它们 会 被 打印 出 来 ， 这 就 和 使 用 img 元 素 或 者 通 
过 1ist-style-image 添 加 的 图 像 是 一 样 的 。 

这 种 方式 的 优点 是 除了 必须 加 载 图 像 之 外 , 可 以 独立 于 内 容 只 捅 人 单独 设置 样式 的 字符 ， 而 
无 需 多 余 的 元 素 。 下 面 展 示 的 是 如 何 通过 修改 之 前 的 样式 ， 使 其 达到 图 3-23 所 示 的 效果 。 


ul.stars li {text-indent: -1.25em; list-style: none; } 
üul.stars li:before {contents "X2605'; 

margin-right: 0.75em; } 

ul.stars li.m:before {color: red;} 


ul.stars li.k:before {color: orange; } 


The Sun 

V645 Centauri (Proxima Centuari) 
Alpha Centauri A 
Alpha Centauri B 
Barnard's Star 
Wolf 359 
Lalande 21185 

= Sirius A 
Sirius B 

Luyten 726-8 A 
Luyten 726-8 B 
Ross 154 

Ross 248 
Epsilon Eridani 
Lacaille 9352 
Ross 128 

EZ Aquarii A 

EZ Aquarii B 

EZ Aquarii C 
Procyon A 

= Procyon B 


+ +e + HT 


* 
* 
* 
* 
* 
* 
* 
* 
* 
* 


图 3-23 ”生成 Unicode 标 记 
这 里 并 不 会 像 使 用 图 像 和 像素 那样 精确 , 因此 第 一 行 的 文本 可 能 不 会 跟 下 面 几 行 文本 精确 对 
齐 ， 尽 管 通常 可 以 做 到 很 接近 。 不 过 ， 它 只 在 列表 项 文本 出 现 多 行 时 才 会 成 为 问题 。 


3.19 不 可 不 知 的 容器 
我 们 通常 会 把 整个 页 面 的 内 容 部 包 右 在 一 个 名 为 wrapper 的 div 里 , 这 是 一 种 很 普遍 的 做 法 ， 
大 致 像 是 这 样 ， 


<body> 
<div class="wrapper"> 


</div> 
</body> 


这 么 做 的 理由 通 第 是 想 使 内 容 大 中 , 或 者 在 内 容 之 外 还 有 其 他 的 几 个 容 带 。 这 种 情况 下 ， 页面 
内 容 之 外 的 容 带 一 般 是 body 元 素 和 giv 元 对。 因此 基于 这 样 的 标记 ， 通 常会 看 到 这 样 的 CSS 写 法 : 
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body (background: #ABACAB; text-align: center;} 
div.wrapper {width: 800px; margin: 0 auto; text-align: left;) 


这 是 个 经 典 的 兼容 老 版 本 正 的 居中 设计 技术 , 老 版 本 的 正 并 不 识别 靠 左 右 外 边 距 来 实现 的 自 
动 居中 ,但 却 认为 文本 居中 ( text-align ) 可 以 用 来 居中 显示 块 元 系 。 
不 过 ， 即 使 没有 额外 的 aiv， 页 面 中 也 已 经 存在 两 个 包 右 在 页 面 内 容 之 外 的 元 素 了 ， 即 boday 
元 素 和 html 元 素 。 是 的 ， 你 可 以 对 ntml 元 素 应 用 样式 。 难 道 不 应 该 这 样 吗 ?对 于 CSS 来 说 ， 
只 不 过 是 另外 一 个 普通 的 元 素 而 已 。 它 一 点 儿 也 不 神奇 ， 甚至 连 特殊 都 算 不 上 ， 只 不 过 因为 它 
文档 树 最 项 层 的 元 素 ， 所 以 才 称 作 “ 根 ”元 素 。 
A, 我们 可 以 把 之 前 的 规则 稍微 修改 一 下 : 


html (background: #ABACAB; text-align: center; } 
body {width: 800px; margin: 0 auto; text-align: left;) 


现在 我 们 可 以 把 wrapper 这 个 div 整 个 移 除 了 ， 对 布局 不 会 有 任何 的 影响 ， 如 图 3-24 所 示 。 


The Great Big Food Show 


Today, Kat and Carolyn and I spent all day at the Great Big Food Show down at the I-X Center. This is the Food Network’s 
road show, and it was held in exactly two very hip and happening cities this year: Philadelphia and Cleveland. The show ran 
here for three days, and every day there were multiple appearances from Food Network stars Marc Summers, Mario Batali, 
Rachael Ray, and Alton Brown. Oh, heck, who are we kidding? The only real star in our personal cooking firmament is 
Alton, deeply wacky dude and hacker cook extraordinaire. A photograph of Alton Brown with his arms around Eric and Kat. 
We stood in line to get our copies of his books signed, and also to thank him for his Thanksgiving turkey recipe, which quite 
literally changed how we cook. I also told him his Web site (specifically, the wonderful Rants & Raves) needs an RSS feed. 
He told me he had no idea what the hell that means. That's all right. Until Alton explained it on his show, I couldn't have 
told you what a Maillard reaction was, let alone how it related to cooking. 


So, clearly, I need a TV show, so I can return the favor. 


We also saw Alton’s final stage show, where he did a sort of live-action espiode of “Good Eats" involving custards, eggnogs, 
ice cream, and other foam-based foods. It was a lot of fun, with probably one or two thousand people in attendance. I've 
heard that the other live shows were similarly popular, er MIU Ore CN that's a lot of people. Even 
if you figure some repeat customers, that's still well over fifteen thousand 


What wasn't fun was the show floor, which was far too cramped and therefore choked with crowds of attendees. The only 
reason I can imagine things were so tight is that they didn't want to pay for more floor space, because the show area was 
completely surrounded by empty space. Rumor has it that next year they plan to make it even bigger, and I certainly hope 
that's the case. It was clearly a popular event, so I think they can afford to bump up the surface area. That may mean a slight 
bump in ticket prices as well, but honestly, they weren't terribly expensive so I think a small increase would be totally 
acceptable. Especially if it yields more elbow room. 


There were also vague promises of turning the live shows into a TV special. I hope they make it two hours long, and call it 
the “Great Big ‘Great Big Food Show’ Show". The name actually rolls off the tongue more smoothly than you might expect. 


In all, we really enjoyed ourselves. Hopefully those of you in less-hip cities will have a chance to see the show next year. 


图 3-24 ”布局 示意 


当 你 意识 到 boqv 和 html 都 可 以 应 用 样式 时 ， 就 可 以 用 它们 做 很 多 有 趣 的 事情 了 。 例 如 ， 假 
设 逢 要 在 页 而 顶部 贯 穹 双色 的 条 纹 ， 并 日 要 在 条 纹 之 间 放 置 徽标 。 那 么 你 可 能 会 考虑 用 一 个 div 
来 实现 ， 不 过 这 里 有 个 蔡 代 方案 ， 它 不 需要 添加 任何 div( 如 图 3-25 所 示 ): 


html {border-top: 5px solid navy;]j 
body {border-top: 55px solid silver; margin: 0; padding: 0;} 
img.logo {position: absolute; top: 10px; left: 10px;} 


当然 ， 你 还 可 以 通过 重复 背景 图 像 实 现 类 似 的 效果 ( 如 图 3-26 所 示 )。 
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html (background: url(stars-m.png) 14px 41px repeat-y; } 
body (background: url(stars-k.png) 54px -20px repeat-x; } 
img.logo (position: absolute; top: 10px; left: 10px;] 


The Great Big Food Show 


Today, Kat and Carolyn and I spent all day at the Great Big Food Show down at the I-X Center. This is the Food Network 

show, and it was held in exactly two very hip and happening cities this year: Philadelphia and Cleveland. The show ran here for three 
days, and every day there were multiple appearances from Food Network stars Marc Summers, Mario Batali, Rachael Ray, and Alton 
Brown. Oh, heck, who are we kidding? The only real star in our personal cooking firmament is Alton, deeply wacky dude and hacker 
cook extraordinaire. A photograph of Alton Brown with his arms around Eric and Kat. We stood in line to get our copies of his books 
ams and also to thank him for his Thanksgiving turkey recipe, which quite literally changed how we cook. I also told him his Web 

site (specifically, the wonderful Rants & Raves) needs an RSS feed. He told me he had no idea what the hell that means. That's all 

right. Until Alton explained it on his show, I couldn't have told you what a Maillard reaction was, let alone how it related to cooking. 


So, clearly, I need a TV show, so I can return the favor. 


We also saw Alton’s final stage show, where he did a sort of live-action espiode of “Good Eats" involving custards, eggnogs, ice 
cream, and other foam-based foods. It was a lot of fun, with probably one or two thousand people in attendance. I’ve heard that the 
other live shows were similarly popular, and with six shows a day over three days, that's a lot of people. Even if you figure some 
repeat customers, that's still well over fifteen thousand. 


What wasn't fun was the show floor, which was far too cramped and therefore choked with crowds of attendees. The only reason I 
can imagine things were so tight is that they didn't want to pay for more floor space, because the show area was completely 
surrounded by empty space. Rumor has it that next year they plan to make it even bigger, and I certainly hope that's the case. It was 
clearly a popular event, so I think they can afford to bump up the surface area. That may mean a slight bump in ticket prices as well, 
but honestly, they weren't terribly expensive so I think a small increase would be totally acceptable. Especially if it yields more 
elbow room. 


There were also vague promises of turning the live shows into a TV special. I hope they make it two hours long, and call it the “Great 
Big ‘Great Big Food Show’ Show". The name actually rolls off the tongue more smoothly than you might expect. 


In all, we really enjoyed ourselves. Hopefully those of you in less-hip cities will have a chance to see the show next year. 


图 3-25 ”星星 和 条 级 


The Great Big Food Show 


Today, Kat and Carolyn and I spent all day at the Great Big Food Show down at the I-X Center. This is the Food Network’s road 
show, and it was held in exactly two very hip and happening cities this year: Philadelphia and Cleveland. The show ran here for three 
days, and every day there were multiple appearances from Food Network stars Marc Summers, Mario Batali, Rachael Ray, and Alton 
Brown. Oh, heck, who are we kidding? The only real star in our personal cooking firmament is Alton, deeply wacky dude and hacker 
cook extraordinaire. A photograph of Alton Brown with his arms around Eric and Kat. We stood in line to get our copies of his books 
signed, and also to thank him for his Thanksgiving turkey recipe, which quite literally changed how we cook. I also told him his Web 
site (specifically, the wonderful Rants & Raves) needs an RSS feed. He told me he had no idea what the hell that means. That’s all 
right. Until Alton explained it on his show, I couldn’t have told you what a Maillard reaction was, let alone how it related to cooking. 


So, clearly, I need a TV show, so I can return the favor. 


We also saw Alton’s final stage show, where he did a sort of live-action espiode of “Good Eats” involving custards, eggnogs, ice 
cream, and other foam-based foods. It was a lot of fun, with probably one or two thousand people in attendance. I’ve heard that the 
other live shows were similarly popular, and with six shows a day over three days, that’s a lot of people. Even if you figure some 
repeat customers, that’s still well over fifteen thousand. 


What wasn’t fun was the show floor, which was far too cramped and therefore choked with crowds of attendees. The only reason I 
can imagine things were so tight is that they didn’t want to pay for more floor space, because the show area was completely 
surrounded by empty space. Rumor has it that next year they plan to make it even bigger, and I certainly hope that’s the case. It was 
clearly a popular event, so I think they can afford to bump up the surface area. That may mean a slight bump in ticket prices as well, 
but honestly, they weren’t terribly expensive so I think a small increase would be totally acceptable. Especially if it yields more 
elbow room. 


There were also vague promises of turning the live shows into a TV special. I hope they make it two hours long, and call it the “Great 
Big ‘Great Big Food Show’ Show”. The name actually rolls off the tongue more smoothly than you might expect. 


In all, we really enjoyed ourselves. Hopefully those of you in less-hip cities will have a chance to see the show next year. 


图 3-26 “好 多 星星 
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FETT RASA 45. T TA EAR SORE GREAT UE Doi fl II, 不 过 , 猜 猜 
如 果 同 时 为 html 元 系 也 设置 一 个 背景 的 话 会 发 生 什 么 情况 呢 ? 


html (background: #ABACAB; } 
body {background: #DED; } 


在 图 3-27 中 可 以 很 清楚 地 看 到 ， 浏览 器 窗口 被 hptml 元 素 的 背景 填 满 了 ， 而 body 的 背景 则 只 
填充 了 内 容 区 域 以 及 这 个 特定 元 素 的 内 边 距 部 分 。 这 取决 于 body 元 素 是 否 足 够 高 以 至 于 其 日 身 
的 底部 可 以 触及 浏览 吉 窗 口 的 底部 。 如 果 不 能 的 话 ， 则 html 的 背景 就 会 在 bodqvy 元 素 的 下 面 显现 
出 来 。 在 boqvy 元 素 含 有 底部 的 外 边 距 ， 或 者 html 元 素 含 有 底部 的 内 边 距 ， 以 及 两 者 都 存在 的 情 
况 下 也 会 产生 这 种 效果 。 


The Great Big Food Show 


Today, Kat and Carolyn and I spent all day at the Great Big Food Show down at the I-X Center. This is the Food Net' 

road show, and it was held in exactly two very hip and happening cities this year: : Philadelphia and Cleveland. The sion: 
here for three days, and every day there were multiple appearances from Food Network stars Marc Summers, Mario Batali, 
Rachael Ray, and Alton Brown. Oh, heck, who are we kidding? The only real star in our personal cooking firmament is 
Alton, deeply wacky dude and hacker cook extraordinaire. A photograph of Alton Brown with his arms around Eric and Kat. 
We stood in line to get our copies of his books signed, and also to thank him for his Thanksgiving turkey recipe, which quite 
literally changed how we cook. I also told him his Web site (specifically, the wonderful Rants & Raves) needs an RSS feed. 
He told me he had no idea what the hell that means. That’s all right. Until Alton explained it on his show, I couldn’t have 
told you what a Maillard reaction was, let alone how it related to cooking. 


So, clearly, I need a TV show, so I can return the favor. 


We also saw Alton's final stage show, where he did a sort of live-action espiode of “Good Eats” involving custards, eggnogs, 
ice cream, and other foam-based foods. a ne ome rr mtt t imer iun I've 


heard that the other live shows were similarly popular, and with six shows a day over three days, that's a lot of people. Even 
if you figure some repeat customers, that's still well over fifteen thousand. 


There were vague promises of turning the live shows into a TV special. I hope they make it two hours long, and call it the 
“Great Big ‘Great Big Food Show’ Show". The name actually rolls off the tongue more smoothly than you might expect. 


In all, we really enjoyed ourselves. Hopefully those of you in less-hip cities will have a chance to see the show next year. 


图 3-27 主体 未 必 总 能 填 满 视窗 


然而 ， 如 果 我 们 从 样式 表 中 移 除 html (background: yellow; } 这 条 规则 ， 则 整个 窗口 都 
会 被 白色 填充 。 
发 生 这 种 情况 是 因为 HTML 规 范 上 说 ， 绘 制 Web 页 面 的 区 域 (canvas) 首先 是 从 html 元 素 获 
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背景 ， 如 果 phtm1 元 系 没 有 设置 背景 ， 则 从 boqy 元 素 获 取 背 景 。 如 果 boqy 也 没有 设置 背景 的 话 ， 
那么 浏览 偶 就 会 被 用 菏 个 移 认 的 颜色 进行 填充 。 
这 是 一 种 很 特殊 的 情况 ， 在 规范 中 有 详细 叙述 。 除 此 之 外 不 会 再 有 其 他 任何 能 让 青 景 〈 或 
者 其 他 任何 CSS 属 性 ) 在 文档 树 中 向 项 层 应 用 的 情况 了。 你 只 需 要 在 设置 html 的 背景 时 注意 一 
PARo 


3.21 服务 器 特定 的 CSS 


你 曾 有 多 少 次 遇 到 下 面 这 样 的 场景 ? 

(1) 在 本 地 更 改 样 式 表 。 

(2) 上 传 更 改 到 开发 用 的 服务 条。 

(3) 切换 到 浏览 锅 并 选择 刷新 。 

(4) 一 点 儿 杰 化 也 没有 。 

(5) 强制 刷新 ， 还 是 没有 变化 。 

(6) 返回 并 检查 是 否 已 成 功 上 传 。 

(7) 再 次 刷新 ， 仍 然 室 无 变化 。 

(8) 试 着 加 一 些 ! important， 上 传 ， 刷 新 ， 没 变化 。 

(9) 开始 马 你 的 电脑 。 

(10) 检查 Firebug 看 看 是 什么 东西 履 产 了 你 的 样式 ， 却 发 现 它 们 压根 儿 没 有 生效 。 

(11) 继续 这 种 状态 几 分 钟 后 ,你 意识 到 你 是 在 一 台 生 产 服务 器 上 进行 刷新 的 ， 而 不 是 在 开发 
用 的 服务 从 上 操作 的 。 

(12) 转 到 开发 用 的 服务 硕 上 得 看 你 的 全 部 更 改 。 

(13) 7a S ACARI T o 

OP LTE ERAS BABA REA T o 最 后 一 次 遇 到 这 种 情况 时 , 我 意识 到 
可 以 在 开发 服务 天 上 放 一 个 额外 的 特殊 样式 表 , 一 个 可 以 让 我 明显 看 出 是 在 开发 服务 各 上 ,而 又 
不 会 破坏 整个 设计 的 样式 表 ， 这 样 就 可 以 少 浪费 许多 感情 本。 

html (background: url(staging-bg.png) 100% 50% repeat-y;) 

事实 证 明 ， 其 实 有 很 多 方法 可 以 实现 这 个 想法 的 。 其 中 最 优雅 的 方式 是 使 用 HTTP 头 发 送 额 
外 的 样式 表 。 如 有 果 你 的 网 站 运行 在 Apache 服 务 硕 上 ， 那 么 可 以 通过 在 服务 硕 的 .htaccess 根 文件 中 
增添 如 下 一 行 代 码 实现 : 

Header add Link "«/staging.css»;rel-stylesheet;type-text/css" 

现在 你 要 做 的 就 是 保证 在 开发 服务 融 根 目录 下 存在 staging.css 这 个 文件 , 这 样 就 大 功 告 成 了 。 
文件 放置 的 位 置 也 并 不 限制 在 根 目 录 ， 你 可 以 把 staging.css 放 在 服务 硕 上 的 任何 位 置 ， 只 需要 把 
尖 括 号 内 的 URL 修 改 为 文件 对 应 的 新 位 置 即 可 。 如 果 你 喜欢 的 话 ， 也 可 以 使 用 完整 的 URL， 比 如 
http:/example.comy/staging.css， 不 过 要 注意 不 能 丢 抒 尖 插 号 ， 因 为 它们 是 必需 的 。 
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当然 了 , 你 总 面临 着 将 staging.css 和 .htaccess 两 个 文件 都 迁移 到 生产 服务 豆 的 风险 。 不 过 你 可 
以 不 使 用 .htaccess 来 承载 staging.css， 而 通过 修改 httpd.conf 来 发 送 文件 ， 从 而 避免 这 个 风险 。 它 看 
上 去 像 这 样 : 

<Directory /path/to/website/rootlevel> 


Header add Link "«/staging.css»;rel-stylesheet;type-text/css" 
</Directory> 


再 一 次 提醒 ,你 需要 把 /path/to/website/rootlevel 修 改 成 本 机 的 网 站 安装 目录 ， 它 只 不 过 是 一 
个 指 回 Web 站 点 文件 所 在 目录 的 Unix 文 件 系 统 路 径 而 已 。 这 种 方式 的 优点 是 ,你 一 般 不 太 可 能 把 
一 个 服务 硕 上 的 httpd.conf 文 件 复 制 到 另外 一 个 服务 关上, 这 种 情况 不 是 不 可 能 发 生 , 但 几率 非常 
非常 小 。 

使 用 HTTP 头 来 承 我 样式 表 的 一 个 缺点 就 是 ， 它 在 Internet Explorer} w 3f Safari] vies PAB 
是 不 起 作用 的 ， 这 就 是 在 公共 网 站 上 很 少 使 用 这 种 技术 来 天 载 CSS 的 绿 故 。 当 然 ， 在 开发 环境 下 
就 无 所 谓 了 ， 只 要 你 是 用 Firefox 或 者 Opera 来 作为 开发 浏览 硕 束 没 问题 了 。 

现在 ,假设 你 既 不 想 运行 Apache 服 务 问 ， 也 不 想 摆 和 弄 它 的 配置 , 但 是 仍然 想 实 现 这 个 想法 的 
话 该 怎么 办 呢 ? 

如 果 是 在 一 个 HS 服务 右上 ,你 可 以 直接 使 用 HTTP 头 发 送 CSS , 详 见 :http:/technet.microsoft. 
com /en-us/library/cc753133(WS.10).aspx， 你 既 可 以 使 用 IIS 的 管理 界面 也 可 以 通过 命令 行进 行 
设置 。 

另 一 方面 ， 如 果 全 部 页 面 都 使 用 PHP 的 话 ， 那 么 你 完全 不 用 摆弄 服务 需 的 配置 ， 不 过 需要 给 
每 一 个 需要 显示 开发 服务 大 样式 的 页 面 上 这 加 一 段 PHP 指 令 。 可 喜 的 是 ， 这 种 方法 也 适用 于 所 有 
DUE 

最 简单 的 办 法 就 是 把 下 面 这 段 代码 添加 到 每 个 页 面 的 head 元 素 中 : 


<?php if ($ SERVER[' HTTP HOST'] == "staging.example.com") { ?> 
<link rel="stylesheet" href="/staging.css" type="text/css" /> 
<?php } ?> 


这 样 就 输出 了 到 一 个 样式 表 的 链接 ， 并 且 如 末 某 个 浏览 锅 不 文 持 的 话 ， 也 不 会 显示 成 任何 
CSS。 

这 种 方式 对 于 任何 staging.example.com 域 下 的 文件 都 是 起 作用 的 。 不 过 ， 还 有 一 个 更 健壮 的 
解决 方案 , 该 方案 可 以 在 任何 服务 如 上 工作 (只 要 在 该 服务 如 的 域名 中 包含 一 个 特定 的 字符 串 即 
可 )， 甚 至 在 个 人 电脑 上 运行 的 本 地 开发 服务 右上 工作 都 可 以 ， 就 像 这 样 : 


<?php 
if(preg match("/staging|test|dev|localhost|127N.0N.0N.1/", 
$ SERVER[ HTTP HOST'/]))( ?> 
<link rel="stylesheet" href-"/staging.css" type="text/css" /> 
<?php } ?> 


你 也 可 以 使 用 PHP 根 据 条 件 输出 HTTP 头 来 引入 样式 表 ， 不 过 老实 说 ， 既 然 已 经 在 每 一 页 都 
f Y Hos aun, ， 那 么 还 不 如 直接 输出 链接 (link) 元 素 。 
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室 无 疑问 ， 类 似 的 方法 在 各 种 各 样 的 Web 开 发 请 言 中 不 胜 枚 举 。 上 面 的 代码 应 该 可 以 起 到 抛 
做 引 玉 的 效果 ， 帮 助 你 继续 实现 具体 细 市 。 

我 要 感谢 Zachary Johnson( http://www.zachstronaut.com/ ) 和 Alan Hogan( http://alanhogan.com/ ) 
提供 了 PHP 代 码 ， 感 谢 Peter Wilson ( http:// peterwilson.cc/ ) 给 我 指出 了 的 IIS 方 法 ,感谢 所 有 的 绅 
EMAN. 


设计 师 们 希望 能 用 CSS 做 的 最 基本 事情 ， 
不 没有 一 种 完全 可 视 化 的 、 用 CSS 进 


是 ， 目 前 还 


布 RE 


见 且 有 用 的 布局 技术 。 


布局 时 的 一 个 非 稼 便捷 的 诊断 工具 。 


在 创建 布局 时 ， 可 以 像 下 面 这 样 使 布局 区 块 的 放置 位 置 可 视 化 (如 图 4-1 所 示 ): 


div (outline: lpx dashed red;} 
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| The systems factor can be summed up in one word: clicks-and-mortar. 
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: e-enable? Anything and everything, regardless of obscureness! Your budget į 
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图 4-1 fy fbaivly eee 


无 颖 就 是 对 页 面 进行 布局 了 。 不 过 有 时 稍 显 奇 怪 的 
井 行 布局 的 方法 。( 并 不 是 说 网 上 有 过 本 钢化 的 
方法 ， 只 不 过 人 们 因为 习惯 了 表格 布局 而 党 得 它 比较 简单 而 已 。) 本 章 我 们 来 看 一 些 能 
化 布局 工作 的 点 子 ， 同 时 介绍 一 些 党 


4.1 用 轮廓 代 蔡 边框 


首先 ， 我 想 谈 谈 关于 轮廓 (outline) 的 使 用 。 轮 廓 乍 一 看 跟 边 框 (border) 很 像 ， 但 是 它 对 
布局 的 影响 方式 却 与 边框 有 着 明显 的 不 同 。 轮 慷 可 以 用 在 发 布 后 的 页 面 布局 上 , 也 是 创建 和 调试 
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: Python. Think cyber-interactive. Our functionality is unparalleled in the 

_ industry, but our robust web services and non-complex use is constantly 

; considered an amazing achievement. What does the term "robust" really 

: mean? It sounds mixed-up, but it's true! The metrics for web-enabled, 

_ plug-and-play re-sizing are more well-understood if they are not virally- 

_ distributed. Do you have a game plan to become user-centric? If you seize 
_ vertically, you may have to e-enable intuitively. 
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the capacity of web services to 
reinvent. It sounds puzzling, but 
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你 或 许 以 为 边框 也 能 完成 同样 的 工作 , 其 实 不 然 。 因为 边框 是 参与 布局 的 , 而 轮廓 并 不 参与 。 

我 的 意思 就 是 : 假设 想 把 一 个 三 栏 布局 ( 共 3 个 aiv ) 放 到 一 个 960 px 宽 的 容 锅 div 中 。( 如 果 
你 不 喜欢 使 用 像素 这 一 单位 ， 那 么 用 em 、 百 分 比 或 者 其 他 宽度 单位 也 一 样 。) 你 把 每 个 aiv 都 设 
置 成 float: left; width: 33.33g%5， 并 且 和 硕 望 能 看 到 每 一 栏 边 界 的 精确 位 置 。 那 么 ， 如 果 添 
加 了 边框 ， 则 最 后 一 个 giv 就 会 跑 到 前 面 两 个 qiv 的 下 面 ( 如 图 4-2 所 示 )。 这 是 因为 每 个 aiv 都 会 
得 到 320 px 的 宽度 ， 加 上 左右 边框 的 宽度 后 会 使 每 个 aiv 的 布局 框 〈layout box ) 的 宽度 增加 到 至 
少 322 px。 把 这 个 数 再 乘 以 3 ， 总 共 宽 度 就 是 966 px。 这 就 没 法 再 放 到 960 px 的 容器 中 了 ， 所 以 第 
三 个 aiv 就 被 挤 下 来 了 ! 
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| The systems factor can be summed up in one word: clicks-and-mortar. 


:  ConHugeCo has permanently altered the theory of branding. What do we i 
: e-enable? Anything and everything, regardless of obscureness! Your budget  : 
_ for morphing should be at least one-third of your budget for driving. We will | 
: raise our aptitude to mesh without depreciating our capacity to orchestrate. 

: Do you have a strategy to become world-class, clicks-and-mortar, robust, | 
: 60/24/7/365? Without functionalities, you will lack implementation. What does  : 
: it really mean to synergize “strategically"? We will cultivate the capacity of | 


图 4-2 ”第 三 栏 被 挤 出 视野 


这 驶 是 我 们 说 的 边框 参与 布局 的 合 义 。 然 而 ,轮廓 并 不 参与 布局 。 实 际 上 ,轮廓 在 元 系 被 放 
置 后 就 已 经 绘制 完成 了 , 所 以 在 三 栏 的 情况 下 ,3 个 giv 会 带 着 它们 周围 绘制 好 的 轮廓 一 个 挨 着 一 
个 地 排列 。 

轮廓 具体 多 细 或 多 粗 都 无 关 紧 要 ,它们 绝对 不 会 使 aiv 或 者 页 面 上 的 其 他 任何 东西 改变 位 置 。 
从 图 4-3 中 很 容易 看 出 ， 它 们 只 会 与 其 他 部 分 发 生 重 又。 

当 轮 廓 用 于 确定 布局 时 ， 就 立马 有 了 很 明显 的 优势 。 如 果 某 些 东西 似乎 不 会 正确 排列 ,那么 
孢 可 以 应 用 一 些 轮廓 来 感 党 一 下 元 素 的 边界 在 哪里 , 并 且 你 完全 不 用 担心 在 这 个 过 程 中 会 破坏 整 
个 布局 。 


PO 


Home Products Buy! Contact | 
4 N 4 À 4 > | a e. a ^h A ama i | | 
I F F | Wu F s — r 
pS RS | DNI v. Ll | 
5 mes (ilg : ae a Fe ee a ; , 


Be Lorem ipsum e 8 here at ConHugeCo believe we know that it is better to unleash Qe © has permanently S 
e Dolor sit magnetically than to utilize transparently. Quick: do you have a front-end altered the theory of branding. 


^ "A 9. oW: e 
eo... 


e Amet consectetuer for regulating unplanned-for e-markets? Our technology takes the t do we e-enable? Anything © 
Pe Adipiscing elit oest features of IIS and Python. The reporting factor is 1000/60/60/24/7/365. and everything, regardless of 
e Sed diam t do we revolutionize? Anything and everything, regardless of obscuri cureness! Your budget for 
Nonummy nibh r budget for enhancing should be at least three times your budget for ing should be at least e 
e Euismod tincidunt rowing. What does the term "customer-defined, B2B" really mean? We think one-third of your budget for 
e Utlaoreet most dot-com web sites use far too much XMLHttpRequest, and not ing. We will raise our aptitude o 
Dolore magna ough XSL. The metrics for collaborative, plug-and-play research and mesh without depreciating our 
e Aliquam erat elopment reports are more well-understood if they are not cross-media. acity to orchestrate. Do you 
re important for something to be synergistic or to be six-sigma? Imagi e a strategy to become world- e 
& [51 e e bination of J++ and HTML. Your budget for repurposing should beat class, clicks-and-mortar, robust, 
east one-third of your budget for utilizing. 4/7/365? Without e 
e ionalities, you will lack 
f all of this comes off as unimagined to you, that's because it is! implementation. What does it 
m mean to synergize 


onHugeCo has revolutionized the abstraction of solutions. We will mesh fhe « ; ; ; 
e of metrics to seize. Without adequate interfaces, solutions are forced spa i d eating 
to become C2C2C. Our technology takes the best aspects of FOAF and ea: It sounds puzzling, but e 
n. Think cyber-interactive. Our functionality is unparalleled in the it's accurate! 
industry, but our robust web services and non-complex use is constantly 
"sered an amazing achievement. What does the term "robust" really © ® ® €» di 
mean? It sounds mixed-up, but it's true! The metrics for web-enabled, 
plug-and-play re-sizing are more well-understood if they are not virally- 
istributed. Do you have a game plan to become user-centric? If you seize 
vertically, you may have to e-enable intuitively. 


[ systems factor can be summed up in one word: clicks-and-mortar. 


"eco has permanently altered the theory of branding. What do we e 
e-enable? Anything and everything, regardless of obscureness! Your budget 

for morphing should be at least one-third of your budget for driving. We will © 
[ our aptitude to mesh without depreciating our capacity to orchestrate. 

Do you have a strategy to become world-class, clicks-and-mortar, robust, 

60/24/7/365? Without functionalities, you will lack implementation. What does e 
&. really mean to synergize "strategically"? We will cultivate the capacity of 

web services to reinvent. It sounds puzzling, but it's accurate! We will rev up e 
o" capacity to cultivate without decrementing our capacity to enable. 


"A (I A m m m 


I|» 


EN 
Tja 
E^ 


图 4-3 ”非常 大 的 点 线 轮 万 


轮 廊 与 边框 的 为 一 个 区 别 是 ,轮廓 必然 是 环绕 着 元 对 的 ， 并且 在 元 系 的 四 周 永 远 保持 一 致 。 
换 种 说 法 就 是 ， 你 不 能 像 设 置 边框 那样 只 设置 左轮 廓 或 者 上 轮廓 。 轮 廓 只 有 两 种 情况 : 环绕 元 
素 四 周 的 简单 轮廓 ， 或 者 干脆 没有 轮廓 。 同 理 ， 你 也 不 能 单独 改变 轮廓 任意 一 侧 的 颜色 、 宽 度 
或 者 样式 。 因 此 ， 如 有 果 你 想 要 一 个 2 px 的 黄色 虚线 轮廓 ， 那 么 环绕 在 整个 元 素 周围 的 都 会 是 一 样 
的 轮廓 。 

注意 ， 元 系 是 可 以 同时 具有 边框 和 轮廓 的 。 在 这 种 情况 下 ， 轮 廓 会 绘制 在 边框 之 外 ,， 所 以 轮 
廓 的 内 边缘 会 紧 挨 春 边框 的 外 边缘 。 如 采 元 素 具 有 外 边 距 的 话 , 则 轮廓 将 绘制 在 外 边 距 所 在 区 域 
之 上 ， 但 是 外 边 距 并 不 会 被 轮廓 改变 或 者 蔡 换 掉 。 


4.2 ”居中 块 状 框 


有 时 候 ， 你 可 能 想 在 容 厅 中 居中 放置 整个 元 素 〈 即 使 容 仑 是 poqy 元 素 时 )。 里 然 在 CSS 中 并 
没有 特定 的 元 素 届 中 属性 ， 但 是 可 以 使 用 外 边 距 来 实现 同样 的 效果 。 

如 果 你 有 一 个 结合 非 弟 紧密 的 布局 , 那 就 很 商 单 了 ,此 时 只 需 计 算出 欲 届 中 的 元 系 两 侧 需要 
留 出 的 空间 ， 并 且 设 置 恰当 的 外 边 距 〈 如 图 4-4 所 示 )。 例 如 : 


div#contain (width: 800px; } 
divimain {width: 760px; margin: 0 20px; } 


4.2 ”居中 块 状 框 9] 


图 4-4 在 一 个 框 中 居中 显示 另 一 个 框 


在 这 种 情况 下 ， 只 不 过 是 简单 的 数学 计算 里 了 。 实 际 上 ,甚至 都 不 需要 div#main 这 条 规则 ， 
只 需要 在 容器 上 应 用 内 边 距 。 

div#contain (width: 760px; padding: 0 20px;} 

同样 的 视觉 效果 ， 不 同 的 方式 而 已 。 

还 有 一 种 情况 是 ， 有 一 个 固定 沉 度 的 元 素 , 但 不 知道 容器 有 和 多大。 这 时 , 仍然 可 以 使 用 外 边 
中 来 实现 ， 只 不 过 会 稍微 有 点 儿 诡 异 。 

考 卡 一 下 当 div 是 body 的 子 元 厅 的 情况 。 你 想 使 这 个 div 居 中 ,但 是 由 于 每 个 浏览 絮 窗 口 可 
能 具有 不 同 的 宽度 ， 因 此 并 不 知道 podqy 到 底 有 多 宽 或 者 多 宗 。 此 时 ， 只 需要 给 这 个 aiv 设 置 一 个 
特定 的 宽度 ， 并 把 左右 外 边 距 的 值 设 置 成 auto 就 搞定 了 ( 如 图 4-5 所 示 )。 

divimain {width: 55em; margin: 0 auto;} 

之 所 以 能 这 样 做 是 因为 CSS 规 范 中 说 明 : 当 一 个 元 素 具 有 特定 的 宽度 ,并 且 左 右 外 边 距 都 为 
自动 确定 时 , 浏览 絮 会 取 元 素 和 容 笑 的 宽度 之 差 , 除 以 二 后 分 别 应 用 在 元 素 的 左 外 边 距 和 右 外 边 
距 上 。 因 此 ， 元 素 框 就 被 居中 了 o 

当然 ,这 不 并 会 使 那个 框 中 的 文字 也 跟着 居中 。 如 果 你 想 让 文字 也 居中 的 话 ， 就 需要 这 样 写 
( 如 图 4-6 所 示 ): 


divimain (width: 55em; margin: 0 auto; text-align: center; } 


i* Amet consectetuer 


图 4-6 


图 4-5 


e Lorem ipsum 
e Dolor sit 


* Adipiscing elit 
e Sed diam 
e Nonummy nibh 


i e Euismod tincidunt 


e Utlaoreet 
* Dolore na 
e Aliquam erat 
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of J++ and HTML. Your budget for repurposing should 
be at least one-third of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


使 用 H 动 外 边 距 和 text-al ign 属 TERS 中 显示 元 素 框 
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需要 注意 的 是 div 比 它 的 容 带 过 的 情况 ， 在 由 左 至 右 书 写 的 语言 中 ， 浏 览 侣 会 将 元 系 框 (而 
不 是 内 容 ) 左 对 齐 ， 而 在 由 右 至 左 书写 的 语言 中 ， 训 览 锅 会 将 元 系 框 右 对 齐 。 


4.3 ”通过 浴 出 遏制 浮动 


为 浮动 已 经 是 现在 CSS 布 局 中 的 重要 组 成 部 分 ， 所 以 通 稼 情况 下 需要 这 样 一 种 元 素 : EL 
含 了 一 些 浮动 元 对 ,并且 可 以 目 适 应 大 小 地 包 下 这些 浮 动 元 素 。 默 认 情 况 下 这 是 不 会 发 生 的 ( 理 
由 很 充分 , 详 见 http://complexspiral.com/publications/containing-floats/ 处 的 第 一 部 分 内 容 ), 所 以 你 
会 遇 到 下 面 这 种 情况 : 

div#main (border: 2px dashed gray; background: #9AC;} 


div.column {float: left; width: 283%; 
padding: 0 1%; margin: 0 1$;j 


你 看 到 图 4-7 中 栏 项 端的 那 条 虚线 了 吗 ? 那 就 是 div#main 的 完整 边框 了 。 产 生 这 种 效 末 是 因 
为 这 个 aiv 的 高 度 只 有 0 px， 而 内 部 浮动 的 栏 aiv 伸 到 它 的 外 面 了 。( 再 一 次 强调 ， 这 并 不 是 CSS 
的 错误 或 者 瑕 普 ， 刚 刚 引 用 的 URL 处 有 详细 的 解释 。) 


eco Mozilla Firefox 


tóm int We here at ConHugeCo believe we know that it ConHugeCo has permanently altered the theory 


Dolor sit is better to unleash magnetically than to utilize of branding. What do we e-enable? Anything 
transparently. Quick: do you have a front-end and everything, regardless of obscureness! 

Amet consectetuer strategy for regulating unplanned-for Your budget for morphing should be at least 

Adipiscing elit e-markets? Our technology takes the best one-third of your budget for driving. We will 


features of IIS and Python. The reporting factor raise our aptitude to mesh without depreciating 


Sed diam is 1000/60/60/24/7/365. What do we our capacity to orchestrate. Do you have a 
: revolutionize? Anything and everything, strategy to become world-class, clicks- 
Nonummy nibh regardless of obscurity! Your budget for and-mortar, robust, 60/24/7/365? Without 
Euismod tincidunt enhancing should be at least three times your functionalities, you will lack implementation. 
budget for growing. What does the term What does it really mean to synergize 
Ut laoreet “customer-defined, B2B" really mean? We think "strategically"? We will cultivate the capacity of 


that most dot-com web sites use far too much — web services to reinvent. It sounds puzzling, but 
XMLHttpRequest, and not enough XSL. The it's accurate! 

Aliquam erat metrics for collaborative, plug-and-play 

research and development reports are more 

well-understood if they are not cross-media. ls it 

more important for something to be synergistic 

or to be six-sigma? Imagine a combination of 

J++ and HTML. Your budget for repurposing 

should be at least one-third of your budget for 

utilizing. 


Dolore magna 


If all of this comes off as unimagined to you, 
that's because it is! 


ConHugeCo has revolutionized the abstraction 
of solutions. We will mesh the aptitude of 
metrics to seize. Without adequate interfaces, 
solutions are forced to become C2C2C. Our 
technology takes the best aspects of FOAF and 
Python. Think cyber-interactive. Our 
functionality is unparalleled in the industry, but 
our robust web services and non-complex use 
is constantly considered an amazing 
achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! 
The metrics for web-enabled, plug-and-play 
re-sizing are more well-understood if they are 
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( 如 图 4-8 所 示 )。 


divimain (border: 2px dashed gray; background: #9AC; 
overflow: auto; } 


[| 4-8 使 用 overf low 让 元 素 直 观 地 包含 浮动 的 后 代 


是 的 ， 这 样 做 也 是 可 以 的 ， 具体 原因 我 们 不 打算 在 这 里 深入 讨论 了 (但 是 如 果 你 好 奇 的 话 ， 
可 以 读 一 下 CSS 2.7 的 10.6.7 节 )。 如 果 你 想 保证 避 开 老 版 本 正中 的 一 些小 问题 ， 那 么 就 为 设置 了 
overflow 的 元 素 设 置 一 个 明确 的 宽度 (width ) IE: 


divimain {border: 2px dashed gray; background: #9AC; 
overflow: auto; width: 100%; } 


这 个 宽度 不 一 定 非 得 是 1008&， 它 可 以 是 除了 auto 之 外 的 任何 值 。 并 且 正 如 我 所 说 的 ， 它 仅 
仅 是 用 来 防止 老 版 本 的 下 浏览 右 “ 弄 脏 ” 它 们 自己 的 。 如 果 你 并 不 关心 老 版 本 的 万， 那 就 完全 可 
以 去 抒 宽 度 声 明 的 部 分 。 

这 种 方法 的 好 处 在 于 ， 它 可 以 使 容器 元 素 (divimain) 保留 在 正常 的 文档 流 中 。 这 意味 着 
它 会 使 后 续 的 内 容 排 在 它 的 底 边 之 下 ,即使 它 比 后 续 内 容 还 窄 也 没关系 , 从 而 避免 了 后 面 的 内 容 
直接 “ 流 ” 到 各 栏 的 后 面 ， 它 默认 情况 下 是 和 容 顺 一 样 宽 的 。 通 过 这 种 方式 ， 就 可 以 实现 width : 
100%， 并 且 可 以 使 容 絮 自 适 应 包裹 元 素 ， 就 像 正 常 文档 流 中 的 元 素 一 样 。 

然而 ， 还 需要 注意 的 是 ， 由 于 我 们 的 例子 中 给 div#main 设 置 了 侧 边 框 ， 因 而 声明 了 wiatn: 
100g 就 意味 着 div#main 实 际 上 伸 出 了 它 的 容 需 元 素 4 px。 使 用 width: auto 可 以 避免 这 种 情况 
的 发 生 ,， 使 整个 元 素 框 ， 包 括 边框 ， 都 会 在 容 需 中 上 自 适 应 ， 不 过 那 时 候 你 或 许 又 会 遇 到 一 些 老 版 
本 正 的 问题 了 。 

还 有 一 点 需要 注意 : overflow 属 性 的 auto 值 意味 着 浏览 需 可 以 〈 如 果 它 认为 有 必要 的 话 ) 
在 aiv#main 上 添加 滚动 条 。 这 在 实际 操作 中 不 一 定 会 出 现 ， 不 过 已 经 有 一 些 关 于 意外 出 现 滚动 
条 的 报告 ， 因 此 为 了 以 防 万 一 ， 还 是 应 该 留意 一 下 。 
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divimain (border: 2px dashed gray; background: #9AC; 
float: left;j 


div.column (float: left; width: 287; 
padding: 0 1%; margin: 0 1$;) 


PP ITE ZA A ETE HZ A TE AS EE UE E 73 HS GLZSTETITE SB RT NOU BJ, 它 
们 也 被 定义 为 目 适 应 内 容 的 宽度 ,不 多 也 不 少 。 在 这 种 特定 的 情况 下 ,这 可 能 变 得 很 危险 : A 
都 被 定义 为 Giv#main 的 1/3 的 宽度 , 但 是 因为 它 是 浮动 的 , 所 以 浏览 硕 将 目 行 决定 div#main 到 底 
多 宽 或 者 多 军 ， 而 这 个 结 采 是 不 可 预知 的 。 

这 个 问题 也 很 好 解决 ， 只 要 给 div#main 明 确定 义 一 个 冤 度 就 可 以 了 ( 如 图 4-9 所 示 ): 


divimain (border: 2px dashed gray; background: #9AC; 
float: left; width: 100$2;) 


图 4-9 ”使 用 float 使 容 大 直观 地 包含 译 动 后 代 


图 4-9 看 上 去 跟 图 4-8 很 像 是 不 是 ? 然而 它们 两 个 却 是 使 用 不 同 的 CSS 实 现 的 。 很 多 时 候 都 有 不 
止 一 种 途径 可 以 实现 相同 的 效果 , 你 只 需要 根据 个 人 的 喜好 和 实际 项 目的 需求 确定 具体 使 用 哪 种 。 

由 于 wiath 和 boraqer 的 值 ，aiv#main 又 一 次 在 右 侧 伸 出 了 一 些 〈4 px )。 然而， 由 于 浮动 元 
素 并 未 在 正 党 的 文档 流 中 ,， 因 此 我 们 不 能 通过 下 接 设置 width: auto 解 决 问题 。 对 浮动 元 素 应 用 
这 条 规则 ， 仪 意味 着 浮动 元 素 将 由 浏览 如 来 决定 宽 罕 。 
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同时 ， 当 用 这 种 方式 浮动 元 又 框 时 ,可 能 会 存在 正常 文档 流 的 内 容 跟 随 到 浮动 元 条 后面 的 风 
险 。 为 了 规避 这 个 风险 ,你 可 能 需要 清除 任何 跟随 在 浮动 元 素 后 面 的 元 素 。 如 果 后 面 是 已 知 的 元 
系 ， 那 么 可 以 直接 指定 清除 ( clear )， 就 像 这 样 ( 假设 footer 总 是 跟随 在 div#main 后 面 ): 


div#footer {clear: left; } 


T RAIN cE ES BTE di vimain/RIBDHJAef AUR. ALAR EHR LSB vete ai A Ae 
择 硕 的 组 合 ( 如 图 4-10 所 示 ): 


div#main + * {clear: left; } 


eoo Mozilla Firefox = 
perfectly then you may also iterate globally. 


ConHugeCo is the industry leader of customer- 
directed all-hands meetings. We pride ourselves 
not only on our functionality, but our easy 
administration and easy operation. Do you have 
a strategy to become next-generation? What do 
we integrate? Anything and everything, 
regardless of reconditeness! Without reporting, 
you will lack subscriber communities. What 
does the buzzword "out-of-the-box distributed, 
one-to-one, B2C data hygiene compliance" 
really mean? The re-sizing factor is cross- 
media. We often drive co-branded performance. 
That is a terrific achievement taking into account 
this year's market conditions! What do we 
facilitate? Anything and everything, regardless 
of humbleness! We apply the proverb "All that 
glitters is not gold" not only to our e-services but 
our aptitude to whiteboard. What does it really 
mean to engage "strategically"? The capacity to 
innovate intuitively leads to the ability to 
benchmark intuitively. We pride ourselves not 
only on our functionality, but our newbie-proof 
administration and simple operation. 


Think micro-end-to-end. 


ConHugeCo has permanently altered the theory 
of niches. What do we morph? Anything and 
everything, regardless of namelessness! Do you 
have a strategy to become sexy? Is it more 
important for something to be strategic or to be 
synergistic? If all of this seems 
discombobulating to you, that's because it is! 
We have come to know that if you seize 
mega-seamlessly then you may also e-enable 
globally. Think innovative. What do we iterate? 
Anything and everything, regardless of 
anonymity! The content factor is cross-media. 
We will productize the term "short-term". 


Legal About Contact 


2010 ConHugeCo Inc. All lefts preserved. 


图 4-10 ”使 用 相 邻 兄弟 选择 器 和 clLear 属 性 将 footer 置 于 各 浮动 栏 之 下 


4.5 ”清除 浮动 


“清除 浮动 ”( clearfix ) 是 一 种 很 老 的 技术 , 已 经 在 很 大 程度 上 被 前 面 两 个 技术 取代 了 , 不 过 
在 某 些 情况 下 使 用 清除 浮动 更 方便 。 璧 如 使 用 之 前 讨论 过 的 提示 时 , 经 常会 导致 某 些 情 况 下 老 版 
本 的 IE 浏 览 融 不 恰当 地 包含 浮动 元 素 ， 这 时 大 都 应 使 用 清除 浮动 。 

清除 浮动 最 简单 的 办 法 就 是 在 文档 中 插入 一 个 元 素 , 并 设置 它 的 clear ( 清除 ) 属性 。 例 如: 


div#main + * {clear: left;} 


<div class="column one">...</div> 
<div class="column two">...</div> 
<div class="column three">...</div> 
<br class="clearfix"> 

<p>. ..</p> 
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这 里 的 br 元 素 是 关键 , 它 会 把 自身 以 及 它 后 面 跟 随 的 任何 元 素 都 放置 在 之 前 出 现 的 浮动 栏 的 
下 方 ( 如 图 4-11 所 示 )。 为 此 。 需 要 以 下 CSS 内 容 : 


.Clearfix {display: block; clear: both;} 


eoo Mozilla Firefox 
perfectly then you may also iterate globally. 
ConHugeCo is the industry leader of customer- 
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really mean? The re-sizing factor is cross- 
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facilitate? Anything and everything, regardless 
of humbleness! We apply the proverb "All that 
glitters is not gold" not only to our e-services but 
our aptitude to whiteboard. What does it really 
mean to engage "strategically"? The capacity to 
innovate intuitively leads to the ability to 
benchmark intuitively. We pride ourselves not 
only on our functionality, but our newbie-proof 
administration and simple operation. 


Think micro-end-to-end. 


ConHugeCo has permanently altered the theory 
of niches. What do we morph? Anything and 
everything, regardless of namelessness! Do you 
have a strategy to become sexy? Is it more 
important for something to be strategic or to be 
synergistic? If all of this seems 
discombobulating to you, that's because it is! 
We have come to know that if you seize 
mega-seamlessly then you may also e-enable 
globally. Think innovative. What do we iterate? 
Anything and everything, regardless of 
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图 4-11 使 用 “清除 浮动 ”方法 将 footer 放 置 在 浮动 栏 下 方 


上 面 使 用 的 CSS 会 确保 bz 元 素 竺 在 两 个 浮动 栏 的 下 方 , 这 也 可 能 导致 在 较 老 的 浏览 需 中 插 人 
一 个 “空白 行 ”。 因 此 ， 如 果 打 算 使 用 这 种 方法 的 话 ， 那 么 首先 要 测试 一 下 。 如 果 确 实 看 到 了 空 
日 行 ， 那 么 试 着 把 CSS 改 成 这 样 : 


.Clearfix {display: block; clear: both; 
font-size: 0; height: 0;} 


有 些 人 用 hr 来 代替 br， See wae RIE NIC AIT OCI — T 2r ett, JPELTE 
不 文 持 CSS 的 浏览 器 中 应 该 能 被 看 到 。 然 而 ， 这 必然 会 在 文 持 CSS 的 浏览 需 中 产生 空白 间隔 ， 因 
为 hr 会 占用 布局 空间 。 peL avastar none 来 避免 这 点 ， 但 如 果 那 么 做 的 话 ， 
hz 就 不 会 对 布局 产生 任何 影响 ， 当 然 也 就 不 会 清除 浮动 了 ! 因此 , 我 们 一 般 会 使 用 一 些 利 用 外 边 
距 的 小 技巧 抵消 空白 : 


hr.clearfix {display: block; clear: left; 
font-size: 0; height: 0; 

Visibility: hidden; 

margin: -0.66em 0; } 


最 终 的 效果 跟 之 前 的 基本 一 样 , 不 过 为 以 防 万 一 你 应 该 测试 一 下 。 如 果 想 在 元 素 放置 位 置 上 
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精确 到 像素 级 的 话 ， 那 么 这 种 特定 的 变种 方法 就 不 是 最 佳 选择 了 ， 最 好 还 是 使 用 br 吧 。 

还 有 一 个 相关 的 方法 , 它 是 依赖 于 生成 内 容 的 ,不 过 最 近 浏 览 絮 更 改 了 处 理 生成 内 容 的 方式 ， 
使 这 种 方法 不 那么 好 用 了 ， 而 这 种 方法 也 很 大 程度 上 被 前 面 讨 论 过 浮动 遏制 技巧 取代 了 。 不 过 ， 
如 果 你 历史 上 的 好 奇 心 被 激发 了 ， 那 么 可 以 看 一 下 http://positioniseverything. net/easyclearing.html 
处 的 内 容 ( 注意 一 下 顶部 的 提示 )。 


4.6 1HSI:;S IA 


与 之 前 的 提示 类 似 , 这 是 一 个 可 以 清除 紧 跟 在 其 他 元 素 之 后 的 元 素 的 方法 ,只 要 被 清除 的 元 
素 与 译 动 元 素 拥 有 相同 的 父 元 素 即 可 。 
考虑 这 样 的 标记 : 


<div class="column one">...</div> 


«div class="column two">...</div> 
<div class="column three">...</div> 
<p>.. .</P> 


ie, Aint div KIRZA HLR, ABAUMATS ER TARAIRE? 如 
图 4-12 所 示 ， 其 实 很 简单 : 


div, three + p {clear: both; } 


eoo Mozilla Firefox = 


administration and easy operation. Do you have 
a strategy to become next-generation? What do 
we integrate? Anything and everything, 
regardless of reconditeness! Without reporting, 
you will lack subscriber communities. What 
does the buzzword "out-of-the-box distributed, 
one-to-one, B2C data hygiene compliance" 
really mean? The re-sizing factor is cross- 
media. We often drive co-branded performance. 
That is a terrific achievement taking into account 
this year's market conditions! What do we 
facilitate? Anything and everything, regardless 
of humbleness! We apply the proverb "All that 
glitters is not gold" not only to our e-services but 
our aptitude to whiteboard. What does it really 
mean to engage "strategically"? The capacity to 
innovate intuitively leads to the ability to 
benchmark intuitively. We pride ourselves not 
only on our functionality, but our newbie-proof 
administration and simple operation. 


Think micro-end-to-end. 


ConHugeCo has permanently altered the theory 
of niches. What do we morph? Anything and 
everything, regardless of namelessness! Do you 
have a strategy to become sexy? Is it more 
important for something to be strategic or to be 
synergistic? If all of this seems 
discombobulating to you, that's because it is! 
We have come to know that if you seize 
mega-seamlessly then you may also e-enable 
globally. Think innovative. What do we iterate? 
Anything and everything, regardless of 
anonymity! The content factor is cross-media. 
We will productize the term "short-term". 


ConHugeCo has permanently altered the theory of branding. What do we e-enable? Anything and everything, regardless of obscureness! Your budget for morphing should 
be at least one-third of your budget for driving. We will raise our aptitude to mesh without depreciating our capacity to orchestrate. Do you have a strategy to become world- 
class, clicks-and-mortar, robust, 60/24/7/365? Without functionalities, you will lack implementation. What does it really mean to synergize "strategically"? We will cultivate the 
capacity of web services to reinvent. It sounds puzzling, but it's accurate! 


Legal About Contact 
2010 ConHugeCo Inc. All lefts preserved. 


图 4-12 ”使 用 相 邻 兄弟 选择 项 和 cleazr 将 footer 置 于 浮动 栏 之 下 
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既然 各 栏 及 段落 共享 父 元 素 , 那么 它们 就 是 兄 第 元 素 。 因 此 ,我 们 可 以 使 用 相 邻 兄弟 选择 天 
(+) 选择 段 沙 元 素 并 把 它 清除 。 

还 有 个 更 通用 的 解决 办 法 ， 就 是 把 p 换 成 通用 选择 骨 : 

div.three + * {clear: both;} 

通过 这 种 方式 ,无论 是 段落 、 列 表 、 表 格 、 格 式 化 的 代码 或 者 其 他 任何 东西 部 可 以 被 清除 。 

注意 ， 其 实 有 一 个 更 简单 的 办 法 可 以 打破 这 种 解决 思路 ， 那 就 是 把 各 栏 用 一 个 独立 的 div 包 
起 来 。 


<div class="columns"> 


<div class="column one">...</div> 
<div class="column two">...</div> 
<div class="column three">...</div> 
</div> 

SD ..</p> 


如 果 标 记 变 成 了 这 样 的 话 , 段落 元 素 就 不 会 被 清除 了 。 这 是 因为 它 已 经 不 再 和 上 面 各 栏 共享 
一 个 父 元 素 ， 所 以 也 不 是 各 栏 的 兄弟 元 素 卫 ， 这 将 使 兄弟 选择 髓 完全 失效 。 按 照 这 种 标记 形态 ， 
你 应 该 使 用 之 前 关于 遏制 浮动 的 提示 了 ， 比 如 overflow: auto. 


47 ”人 简单 的 两 栏 布局 
把 两 栏 文本 并 排 摆 在 一 起 是 非常 简单 的 , 使 它们 浮动 即 可 。 如 果 需 要 清除 任何 位 于 它们 下 方 


的 元 素 ， 或 者 清除 任何 跟随 在 它们 后 面 的 元 素 ， 那 么 请 看 前 面 一 节 的 提示 。 
考虑 下 面 这 样 的 标记 : 


<div class="column one">...</div> 
<div class="column two">...</div> 
<div class="footer">...</div> 


你 只 是 再 要 证 一 栏 换 春 另外 一 栏 , 因此 唯一 需要 决定 的 就 是 哪 一 栏 放 在 哪 一 侧 ， 比 如 第 一 栏 
是 放 在 左 侧 还 是 右 侧 呢 ?” 为 了 让 它 有 趣 一 点 儿 ， 假 设 你 希望 它 在 右 侧 ， 没 问题 : 

.Column {floaty right; width: 50%;} 

AEE FARA TA LAE sO, SPE MH REE, m EAR RE, 但 它们 
的 硝 是 并 排 的 ! 

册 多 加 一 点 儿 CSS， 我 们 就 可 以 让 它们 看 上 去 还 可 以 了 《如 网 4-13 所 示 ): 

.column (float: right; width: 30%; margin: 0 10$;) 

“VAT, footer WEF A Ze dL] BAUR, AE AY REMER 2 AEA DU, 
MBAR, RETR ENE! 

.footer {clear: both; } 

这 就 是 简单 的 两 栏 布局 ， 它 具有 两 点 美妙 之 处 。 首 先 一 点 是 你 可 以 把 各 栏 放 在 任意 的 位 置 ， 
而 不 用 考虑 它们 在 源 代码 中 的 顺序 。 正 如 我 们 看 到 的 , 第 一 栏 可 以 在 右 侧 。 第 三 点 就 是 ， 如 来 你 
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改变 想法 了 ， 那么 可 以 把 Eloat : right; 改 成 float: left;, 轻松 地 交换 它们 的 位 置 ， 简直 小 
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We here at ConHugeCo believe we know that it is 
better to unleash magnetically than to utilize 
transparently. Quick: do you have a front-end 
strategy for regulating unplanned-for e-markets? 
Our technology takes the best features of IIS and 
Python. The reporting factor is 1000/60/60/24 
17/365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The 
metrics for collaborative, plug-and-play research 
and development reports are more well-understood 


Lorem ipsum 
Dolor sit 


Amet consectetuer 


Adipiscing elit 
Sed diam 


Nonummy nibh 
Euismod tincidunt 
Ut laoreet 

Dolore magna 


Aliquam erat 


if they are not cross-media. Is it more important for 
something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 
of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes 
the best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing 
are more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have 
to e-enable intuitively. 


图 4-13 ”人 简单 的 两 栏 布 局 


当然 ， 你 也 可 以 通过 其 他 任何 宽度 度量 单位 来 实现 ， 像 系 、em、 百 分 比 等 郡 行 。 这 完全 取 
决 于 你 布 望 各 栏 的 宽度 是 “流动 的 ”〈 即 随 春 浏览 带 窗 口 的 宽度 伸缩 )， 还 是 “固定 的 ”〈 即 设置 
一 个 不 可 变 的 值 ， 通 常 为 像 系 )。 要 想 讨论 哪 一 个 更 好 或 者 更 坏 可 能 需要 一 整 革 的 内 容 ， 所 以 我 
们 暂且 “选择 适合 设计 的 "， 然 后 继续 。 


Ar -> — 十、 
4.8 简单 的 三 栏 布局 
如 图 4-14 所 示 ， 由 两 栏 布局 变 为 三 位 布局 非常 位 单 : 添加 一 个 qiv， 为 它 设置 恰当 的 类 ， 并 
日 使 各 栏 浮动 。 
.Column {width: 20%; margin: 0 5%; float: left;} 


.two (width: 303%; } 
.footer {clear: both; } 


<div class="column one">....</div> 
<div class="column two">...</div> 
<div class="column three">...</div> 
<div class="footer">...</div> 


4.8 简单 的 三 栏 布局 101 


这 是 个 基本 的 训练 , 它 本 里 只 不 过 是 比 一 个 简单 的 两 栏 布局 多 设置 了 一 栏 而 已 。 我 之 所 以 拿 
它 来 举例 是 想 市 大 家 探索 一 些 大 于 浮动 栏 设置 样式 的 内 容 。 


Pa 


Lorem ipsum 


Dolor sit 


Amet consectetuer 
Adipiscing elit 

Sed diam 
Nonummy nibh 
Euismod tincidunt 
Ut laoreet 

Dolore magna 


Aliquam erat 


Mozilla Firefox 


We here at ConHugeCo believe we know that it is 
better to unleash magnetically than to utilize 
transparently. Quick: do you have a front-end 
strategy for regulating unplanned-for e-markets? 
Our technology takes the best features of IIS and 
Python. The reporting factor is 1000/60/60/24 
171365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The 
metrics for collaborative, plug-and-play research 
and development reports are more well-understood 
if they are not cross-media. Is it more important for 
something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 


of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes 
the best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing 
are more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have 
to e-enable intuitively. 


图 4-14 fü] LAY =A 
你 可 能 在 这 里 或 者 前 面 的 一 方 已 经 注意 到 了 ， 


ConHugeCo has permanently 
altered the theory of branding. 
What do we e-enable? Anything 
and everything, regardless of 
obscureness! Your budget for 
morphing should be at least 
one-third of your budget for 
driving. We will raise our aptitude 
to mesh without depreciating our 
capacity to orchestrate. Do you 


have a strategy to become world- 


class, clicks-and-mortar, robust, 
60/24/7/365? Without 
functionalities, you will lack 
implementation. What does it 
really mean to synergize 
"strategically"? We will cultivate 
the capacity of web services to 
reinvent. It sounds puzzling, but 
it's accurate! 


—^r a EE TCR Ze AA DUE S EB 


并 没有 在 一 起 。 相 反 ， Ruso oM NE ME 因此 ， 在 之 前 的 这 段 CSS 
中 ， 各 栏 会 相距 10% 的 距离 (5% 加 上 5% )。 如 果 我 们 把 $% 改 成 20 px 的 话 ， 那 么 各 栏 则 会 相距 


40 px. 


第 二 个 问题 是 ,我 们 很 难 在 各 栏 之 间 插 入 一 个 “全 高 度 ”的 分 隔 符 。 这 也 是 那些 困扰 人 们 长 


na 
置 中 ， 如 果 你 知道 中 间 一 栏 总 会 


创建 可 爱 的 SAAT o 


这 需要 对 CSS 做 一 些小 改动 ， 但 不 会 太 多 ( 如 图 4-15 所 示 ): 


: 0 2%; padding: 0 2%; 
border-width: 


.Golumn {width: 20%; 


.two (width: 303%; 


( 我 HS AG c eZ 


t lpx solid gray; 


并 且 它 仍然 存在 ， 我 们 也 还 是 要 面 对 它 。 然 而 ， 在 三 栏 
T) 是 最 高 的 一 个 ,那么 可 以 给 它 设 置 侧 边框 来 


: left;} 
0 1px;} 


吉 构 的 设 


由 于 中 间 一 栏 是 最 高 的 , 因此 它 的 边框 可 以 作为 分 隔 符 。 我 们 需要 调整 一 下 各 栏 的 外 边 距 和 
内 边 距 ， 以 使 分 隔 符 与 各 栏 的 内 容 保持 距离 ， 不 过 这 没什么 大 不 了 的 。 好 吧 ， 事 实 上 我 们 可 以 只 
调整 中 间 一 栏 ， 而 不 用 去 管 .column 这 条 规则 ， 就 像 这 样 : 
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.column {width: 20%; margin: 0 5%; float: left;} 
.two (width: 30%; border: 1px solid gray; border-width: 0 1px; 


margin: 0; padding: 


Lorem ipsum 
Dolor sit 

Amet consectetuer 
Adipiscing elit 
Sed diam 


Nonummy nibh 


Euismod tincidunt 


Ut laoreet 
Dolore magna 


Aliquam erat 


布 局 


0 4$;] 


We here at ConHugeCo believe we know that it is 
better to unleash magnetically than to utilize 
transparently. Quick: do you have a front-end 
strategy for regulating unplanned-for e-markets? 
Our technology takes the best features of IIS and 
Python. The reporting factor is 1000/60/60/24 
'7/365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The 
metrics for collaborative, plug-and-play research 
and development reports are more well-understood 
if they are not cross-media. Is it more important for 
something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 
of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes 


the best aspects of FOAF and Python. Think cyber- 


interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 


amazing achievement. What does the term "robust" 


really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing 
are more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have 
to e-enable intuitively. 


ConHugeCo has permanently 
altered the theory of branding. 
What do we e-enable? Anything 
and everything, regardless of 
obscureness! Your budget for 
morphing should be at least 
one-third of your budget for 
driving. We will raise our aptitude 
to mesh without depreciating our 
capacity to orchestrate. Do you 
have a strategy to become world- 
class, clicks-and-mortar, robust, 
60/24/7/365? Without 
functionalities, you will lack 
implementation. What does it 
really mean to synergize 
"strategically"? We will cultivate 
the capacity of web services to 
reinvent. It sounds puzzling, but 
it's accurate! 


图 4-15 ”将 最 高 栏 的 边框 作为 各 栏 的 分 隔 符 


结果 基本 上 是 一 样 的 ， 可 能 在 分 隔 符 的 放置 位 置 上 会 有 一 两 个 像素 的 差异 。 
你 可 能 有 很 好 的 理由 来 质疑 这 里 的 一 些 数学 ， 辟 如 内 边 距 的 4% 是 从 哪里 来 的 呢 ?” 而 5% 被 分 
成 两 个 2% 又 是 怎么 回 事 呢 ? 
这 恰好 就 是 我 想 说 的 第 三 点 , 就 是 你 必须 小 心 处 理 流动 布局 的 各 栏 和 边框 ,假设 你 只 是 把 5% 
的 外 边 距 分 成 了 两 半 ， 那 么 再 加 上 边框 的 话 就 会 有 风险 了 (如 图 4-16 所 示 )。 


scolumm (widths 20%; margin: 0 2.5%; padding: 0 2.5%; float: left;} 
.two (width: 30%; border: 1px solid gray; border-width: 0 lpx;} 


是 的 ， 这 就 是 浮动 挥 落 (float drop )。 因 为 没有 足够 的 空间 使 三 栏 并 肩 排列 ， 所 以 第 三 栏 抒 
落 在 其 他 两 栏 的 下 面 了 。 这 是 因为 宽度 、 外 边 距 、 内 边 距 和 边框 加 起 来 的 总 和 超过 了 100%， 实 
际 上 是 100% 加 上 了 2 px。 事 实 上 ， 即 使 比 100% 只 多 1 px 也 显得 太 多 了 。 

对 此 ,我 没有 什么 好 办 法 可 以 省 去 “仔细 核查 你 的 数学 运算 ”的 步骤 。 对 于 全 高 度 分 隔 符 的 
问题 ， 下 面 两 节 或 许 会 提供 很 好 的 解答 。 
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Lorem ipsum We here at ConHugeCo believe we know that it is 


Dolor sit better to unleash magnetically than to utilize 
transparently. Quick: do you have a front-end 
Amet consectetuer strategy for regulating unplanned-for e-markets? 
Adipiscing elit Our technology takes the best features of IIS and 
Python. The reporting factor is 1000/60/60/24 
Sed diam [T/365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
Euismod tincidunt budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
Ut laoreet dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The 
metrics for collaborative, plug-and-play research 
Aliquam erat and development reports are more well-understood 
if they are not cross-media. Is it more important for 


Nonummy nibh 


Dolore magna 


something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for er aei should be at least one-third 
of your budget for uti 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes 
the best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing 
are more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have 
to e-enable intuitively. 


图 4-16 不 小 心 挤 掉 了 第 三 栏 


4.9 伪造 栏 布 局 


这 是 一 个 非常 流行 的 经 典 CSS 技 术 , 是 由 Dan Cederholm ( http://simplebits .com/ ) 在 2004 年 为 
A List Apart" 写 的 文章 中 提出 的 ， 伪 造 栏 (faux column ) 是 解决 使 用 CSS 创 建 等 高 栏 这 一 烦人 问 
题 的 一 个 古老 解决 方案 。 

为 了 创建 伪造 栏 ， 首 先 需要 写 好 各 栏 的 结构 。 


<div class="column one">...</div> 
<div class="column two">...</div> 
<div class="column three">...</div> 


EA fee FT BE BOE oH DRE HIE ROB DS EKRE Je 85) IR ER BI ART R o 
如 图 4-17 所 示 ， 能 使 这 个 技术 起 作用 的 关键 就 是 确保 各 栏 具有 以 像素 为 单位 的 宽度 值 ， 并 且 全 部 
祁 用 像素 来 定义 〈 我 希望 排除 字号 大 小 六 


columm {width: 300px; margin: 0 5px; padding: 0 5px; float: right: } 


(D Jeffrey Zeldman 创 建 于 1997 年 ,起 初 是 个 关于 Web 设 计 的 邮件 列表 ， 数 月 内 就 有 16 000 多 名 设计 师 及 开发 者 加 入 
该 列表 。1998 年 改 为 网 络 杂 志 ， 重 点 关注 Web 标 准 以 及 最 佳 实践 ， 目 前 已 经 是 Web 标 准 及 Web 设 计 领 域 的 权威 网 
站 ， 网 址 为 http:/www.alistapart.com/。 


现在 我 们 只 需要 “ 补 画 ” 一 组 分 隔 符 。 我 们 需要 一 个 至 少 和 各 栏 本 身 等 高 的 元 素 ， 最 好 能 


ConHugeCo has permanently altered the theory of 
branding. What do we e-enable? Anything and 
everything, regardless of obscureness! Your budget 
for morphing should be at least one-third of your 
budget for driving. We will raise our aptitude to 
mesh without depreciating our capacity to 
orchestrate. Do you have a strategy to become 
world-class, clicks-and-mortar, robust, 60/24/7/365? 
Without functionalities, you will lack implementation. 
What does it really mean to synergize 
“strategically"? We will cultivate the capacity of web 
services to reinvent. It sounds puzzling, but it's 
accurate! 


全 等 高 ， 壁 如 容器 div。 


<div 
<div 
<div 
<div 
</div> 


现在 我 们 需要 两 样 东 西 ， 


div.contain {width: 


就 是 一 个 图 万， 


AA — 


Hi 


class="contain"> 


960px; 


00x J@] Docas Tb 


overflow: 


它 可 以 在 填充 容 


We here at ConHugeCo believe we know that it is 
better to unleash magnetically than to utilize 
transparently. Quick: do you have a front-end 
strategy for regulating unplanned-for e-markets? 
Our technology takes the best features of IIS and 
Python. The reporting factor is 1000/60/60/24 
7/365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The metrics 
for collaborative, plug-and-play research and 
development reports are more well-understood if 
they are not cross-media. Is it more important for 
something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 
of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes the 
best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing are 
more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have to 
e-enable intuitively. 


图 4-17 放置 三 栏 


class="column one">...</div> 
class="column two">...</div> 
class="column three">...</div> 


auto; } 


— 


Lorem ipsum 


Dolor sit 


. Sed diam 


Amet consectetuer 


Adipiscing elit 


Nonummy nibh 


Euismod tincidunt 


Ut laoreet 


Dolore magna 


Aliquam erat 


Bi ease n] LABURTE See E RES : 


育 景 的 同时 设置 各 栏 的 分 隅 符 ， 如 图 4-18 所 示 。 


XPERIA A SLR ES, 


图 4-18 包含 分 隔 符 的 背景 图 像 
因为 它 会 被 垂直 平 铺 (如 图 4-19 所 示 )。 
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div.contain {width: 960px; margin: 0 auto; overflow: 
background: url(separators.png) 0 0 repeat-y; } 


auto; 


ConHugeCo has permanently altered the theory of 
branding. What do we e-enable? Anything and 
everything, regardless of obscureness! Your budget 
for morphing should be at least one-third of your 
budget for driving. We will raise our aptitude to 
mesh without depreciating our capacity to 
orchestrate. Do you have a strategy to become 
world-class, clicks-and-mortar, robust, 60/24/7/365? 
Without functionalities, you will lack implementation. 
What does it really mean to synergize 
"strategically"? We will cultivate the capacity of web 
services to reinvent. It sounds puzzling, but it's 
accurate! 


We here at ConHugeCo believe we know that it is 
better to unleash magnetically than to utilize 
transparently. Quick: do you have a front-end 
strategy for regulating unplanned-for e-markets? 
Our technology takes the best features of IIS and 
Python. The reporting factor is 1000/60/60/24 
/7/365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The metrics 


Lorem ipsum 
Dolor sit 

Amet consectetuer 
Adipiscing elit 

Sed diam 
Nonummy nibh 
Euismod tincidunt 
Ut laoreet 


Dolore magna 


for collaborative, plug-and-play research and 
development reports are more well-understood if 
they are not cross-media. Is it more important for 


Aliquam erat 


something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 
of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes the 
best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing are 
more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have to 
e-enable intuitively. 


图 4-19 ”通过 背景 图 像 实 现 的 栏 分 隔 符 


大 功 告 成 啦 ! 
当然 , 这 不 仅 限 于 分 隅 符 , 任何 可 以 垂直 平 铺 的 图 案 交 可以。 比如 填充 栏 的 痛 景 色 ( 如 图 4-20 
所 示 )， 只 需 快速 修改 图 像 即 可 实现 。 


div.contain {width: 960px; margin: 
background: url(filled-columns.png) 


O auto; overflow: 


0 0 repeat-y; } 


这 种 技术 当然 可 以 文 持 多 栏 的 情况 , 你 想 要 多 少 都 可 以 ,只 需要 恰当 地 设置 背景 就 完全 可 以 


auto; 


当然 ， 使 用 以 像素 为 单位 的 宽度 进行 布局 时 这 种 方法 非常 好 ,而 且 很 多 人 也 是 这 么 做 的 。 这 
种 方法 也 有 一 些 潜在 的 问题 ， 但 其 中 很 多 问题 已 经 被 现代 浏览 器 中 的 “页 面 缩 放 ” 功 能 解决 了 ， 
不 过 没有 解决 全 部 问题 。 如 果 用 户 的 浏览 器 窗口 比 你 的 整体 布局 罕 的 话 ， 则 他 们 会 看 到 一 个 水 平 
的 滨 动 条 。 相 反 地 ， 如 果 他 们 的 浏览 器 窗口 比 你 的 布局 宽 很 多 的 话 ， 那么 在 页 面 的 一 侧 或 两 侧 就 
会 出 现 过 多 的 空白 。 或 许 你 并 不 在 意 这 些 可 能 性 ， 不 过 它们 确实 值得 考虑 。 

如 果 你 想 要 一 个 适用 于 流 式 布局 的 跟 伪 造 栏 类似 的 技术 ， 那 么 下 一 节 就 是 为 你 准备 的 。 


ere 


We here at ConHugeCo believe we know that it is Lorem ipsum 


better to unleash magnetically than to utilize Dolor sit 
transparently. Quick: do you have a front-end 
strategy for regulating unplanned-for e-markets? Amet consectetuer 
Our technology takes the best features of IIS and + nt ; 

n. The reporting factor is 1000/60/60/24 Adiphong sit 
[T/365. What do we revolutionize? Anything and Sed diam 
everything, rdless of obscurity! Your budget for : 

d emia beep be at least sales times vain Nonummy nibh 
budget for growing. What does the term "customer- Euismod tincidunt 
defined, B2B" really mean? We think that most 

services to vent er It sounds puzzling, but it's dot-com web sites use far too much Ut laoreet 
accurate! XMLHttpRequest, and not enough XSL. The metrics Diore = 
for collaborative, plug-and-play research and = 
development reports are more well-understood if Aliquam erat 
they are not cross-media. Is it more important for 
something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 
of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes the 
best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing are 
more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have to 
e-enable intuitively. 


图 4-20 ”填充 栏 的 痛 景 色 (为 见 彩 择 图 4-20 ) 


410 流 式 漂白 布局 


假设 想 拉 伸 栏 分 d 符 或 者 背景 使 它们 等 高 ， 但 布局 是 流 式 的 ， 那 么 流 式 漂 白 〈1liquid bleach ) 
布局 就 很 适合 你 了 。 这 种 多 栏 布 局 技术 是 由 Doug Bowman ( 因 滑 动 门 技术 而 闻名 ) 和 Eric Meyer 
(这 家 伙 是 谁 ”) 在 2004 年 年 压 一 起 研究 出 来 的 。 之 所 以 取 这 个 名 字 是 因为 它 本 里 文 持 流 式 布局 ， 
而 且 Doug Bowman 当 时 的 博客 主题 为 Bleach (WA )o 

流 式 深 日 布局 最 开始 跟 伪 造 栏 布局 很 像 ， 不 过 稍微 增添 了 一 点 儿 东 西 。 


<div class="contain"> 
<div class="inner"> 


<div class="column one">...</div> 
<div class="column two">...</div> 
<div class="column three">...</div> 
</div> 

</div> 


要 想 使 它 可 以 工作 ,你 需要 为 栏 之 间 的 每 个 空 际 准 备 一 个 容 希 。 如 果 你 喜欢 的 话 ， 容 天 的 数 
量 可 以 比 栏 数 少 一 个 。 由 于 这 里 有 3 个 栏 ， 我 们 需要 两 个 容 逢 。 此 外 ， 我 们 还 需要 为 每 个 容 种 准 
备 一 个 分 隅 符 和 /或 背景 图 案 。 
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column {width: 20%; margin: 0 5%; float: left;} 
.two (width: 30%;} 


然后 我 们 只 用 一 个 背景 图 像 。 注 意 , 图 4-21 中 仅仅 展示 了 图 像 的 一 部 分 , 它 实 际 上 宽 3000 px 
( FLAY! )。 
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图 4-21 第 一 个 分 隅 符 图 像 ( 男 见 彩 插图 4-21 ) 


注意 图 像 中 分 隅 符 的 左 侧 有 十 充 颜 色 ， 而 右 侧 是 完全 透明 的 〈 灰 色 的 棋盘 图 案 
中 对 网 像 透明 部 分 坎 认 的 蔡 代 网 案 )。 

下 面 是 比较 重要 的 部 分 : 分 隔 符 必 须 正 好 摆 在 两 栏 的 空 承 中 。 在 这 种 情况 下 ,我们 会 把 它 放 
置 在 最 左边 的 栏 和 中 间 的 栏 之 间 ( 如 图 4-22 所 示 ) 我 们 希望 分 隔 符 能 够 沙 在 容 天 25% 的 位 置 上 ， 
即 最 左 侧 两 栏 中 间 的 位 置 ， 那 么 有 两 件 事 是 我 们 需要 做 的 。 
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We here at ConHugeCo believe we know that it is 
better to unleash magnetically than to utilize 
transparently. Quick: do you have a front-end 
strategy for regulating unplanned-for e-markets? 
Our technology takes the best features of IIS and 
Python. The reporting factor is 1000/60/60/24 
171365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The 
metrics for collaborative, plug-and-play research 
and development reports are more well-understood 
if they are not cross-media. Is it more important for 


something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 
of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes 
the best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing 
are more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have 
to e-enable intuitively. 


ConHugeCo has permanently 
altered the theory of branding. 
What do we e-enable? Anything 
and everything, regardless of 
obscureness! Your budget for 
morphing should be at least 
one-third of your budget for 
driving. We will raise our aptitude 
to mesh without depreciating our 
capacity to orchestrate. Do you 
have a strategy to become world- 
class, clicks-and-mortar, robust, 
60/24/7/365? Without 
functionalities, you will lack 
implementation. What does it 
really mean to synergize 
"strategically"? We will cultivate 
the capacity of web services to 
reinvent. It sounds puzzling, but 
it's accurate! 


放置 第 一 个 背景 图 像 ( 男 见 彩 择 图 4-22 ) 
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首先 , 正如 之 前 的 图 中 所 示 , 分 隔 符 图 像 是 以 25% 的 比例 贯穿 


它 的 中 间 点 是 距离 图 像 左边 绿 750 px 的 位 置 。 


其 次 是 CSS: 


.inner {background: url(l1b01.png) 25% 0 repeat-y; 


你 看 到 了 吗 ? 距离 背景 


只 要 容 硕 的 25% 的 宽 小 于 750 px 就 没 问题 1 


为 了 填充 右 侧 的 分 隅 符 , 我 们 只 需要 再 加 一 个 图 像 并 且 重 复 与 第 


况 下 ， 我 们 希望 分 隐 符 位 于 中 间 一 栏 和 最 右 侧 的 一 栏 之 间 ， 如 图 4-23 所 示 。 最 右 侧 的 栏 宽度 
209687638 vu EE AI E fii SS P IER. Lcx 


30% 


整个 3000 px 宽 的 图 像 的 。 因 此 ， 


overflow: auto; } 


图 像 左 边缘 7$0 px (25% ) 的 点 刚好 和 容 需 2$% 的 点 重合 在 一 起 了 。 
一 个 类 似 的 操作 。 在 这 种 情 


ARE RIELES Aa Wa, 图 像 


70% 的 位 置 ， ean px 的 图 像 的 2100 px 的 位 置 上 。 分 隔 符 的 左 侧 是 


侧 填充 了 颜色 ， 我 们 通 


.contain (background: url(1b02.png) 
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最 后 一 个 小 技巧 : 如 来 希望 给 中 间 栏 填充 颜色 的 话 ( 如 图 4-24 所 示 )， 无 需 增 添 任何 标记 ， 


图 4-23 ”放置 第 二 个 


See M 


一 点 儿 CSS 即 可 使 它 就 位 : 


70% 0 repeat-y; 


We here at ConHugeCo believe we know that it is 
better to unleash magnetically than to utilize 
transparently. Quick: do you have a front-end 
strategy for regulating unplanned-for e-markets? 
Our technology takes the best features of IIS and 
Python. The reporting factor is 1000/60/60/24 
/171365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
budget for growing. What does the term “customer- 
defined, B2B" really mean? We think that most 
dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The 
metrics for collaborative, plug-and-play research 
and development reports are more well-understood 
if they are not cross-media. Is it more important for 


something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 
of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes 
the best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term “robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing 
are more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have 
to e-enable intuitively. 


overflow: auto; } 


ConHugeCo has permanently 
altered the theory of branding. 
What do we e-enable? Anything 
and everything, regardless of 
obscureness! Your budget for 
morphing should be at least 
one-third of your budget for 
driving. We will raise our aptitude 
to mesh without depreciating our 


class, clicks-and-mortar, robust, 
60/24/7/365? Without 
functionalities, you will lack 
implementation. What does it 
really mean to synergize 
"strategically"? We will cultivate 
the capacity of web services to 


背景 图 像 ( 男 见 彩 插图 4-23 ) 
阳 符 也 都 会 在 正确 的 位 置 上 , 只 要 窗口 的 宽度 不 超过 3000 px, 
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只 需要 为 外 围 的 容器 添加 背景 


.contain (background: #DECADE url(1b02.png) 70% 0 repeat-y; overflow: auto; } 


Lorain sch We here at ConHugeCo believe we know that it is ConHugeCo has permanently 
Dolor sit better to unleash magnetically than to utilize altered the theory of branding. 
praca Quick: do you have a front-end What do we e-enable? Anything 
Amet consectetuer strategy for regulating unplanned-for e-markets? 
Adipiscing elit Our technology takes the best features of IIS and 
Python. The reporting factor is beat 
Sed diam 171365. What do we revolutionize? Anything 
N ibh everything, regardless of obscurity! Your icai for 
SEITEN m enhancing should be at least three times your 
Euismod tincidunt budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
Ut laoreet dot-com web sites use far too much 


XMLHttpRequest, and 
Doo magne i ive, plug-and-play functionalities, you will lack 
well-understood implementation. What does it 
really mean to synergize 
"strategically"? We will cultivate 
Imagine a combination of J++ and HTML. Your the capacity of web services to 
budget for repurposing should be at least one-third reinvent. It sounds puzzling, but 
of your budget for utilizing. it's accurate! 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes 
the best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is considered an 


Aliquam erat 


does the term "robust" 


amazing achievement. What 
really mean? It sounds mixed-up, but it's true! The 


user-centric? If you seize vertically, you may have 
to e-enable intuitively. 


图 4-24 Sa BE ( 为 见 彩 插图 4-24 ) 


这 个 背景 色 “ 穿 透 ” 了 背景 图 像 的 透明 部 分 ,一切 部 没有 问题 。 

在 不 需要 填充 栏 背景 而 只 需要 能 够 适应 流 式 布局 的 分 隔 符 时 ,可 以 使 用 同样 的 CSS 并 且 符 换 
背景 图 像 。 你 只 需要 竺 直 平 铺 分 隔 符 图 像 ， 没 有 牢 外 的 操作 了 。 因 此 ,它们 可 以 是 2 px 或 者 5 px, 
或 者 无 论 多 少 像素 宽 的 图 像 ， 只 要 包含 分 隅 符 即 可 。 然 后 ， 你 就 可 以 使 用 跟 之 前 一 样 的 CSS 使 它 
{1 EOP T 


.inner {background: url(sepOl.png) 25% 0 repeat-y; overflow: auto;} 
.contain (background: url(sep02.png) 75% 0 repeat-y; overflow: auto; } 


ETB LTE Y, 如 于 你 发 现 分 隔 符 在 横 加 上 差 一 两 个 像 系 , ABA oo BF A S — 
个 透明 的 像素 即 可 。 


4.11 唯一 布局 


这 种 布局 技术 的 名 字 〈One True Layout) 有 点 “唯我独尊 ”， 但 它 的 用 处 却 是 姐 庸 置疑 的 。 
这 种 技术 是 由 Alex Robinson 在 2005 年 年 底 ( 见 http://positioniseverything.net/articles/onetruelayout/ ) 
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提出 并 目 此 流行 起 来 的 ， 其 核心 思想 是 : 你 可 以 使 浮动 栏 的 排列 顺序 独立 于 文档 源 代码 的 顺序 。 
这 是 在 简单 浮动 栏 布局 ( 见 前 面 几 节 ， 它 的 布局 是 跟 源 代码 顺序 绑 定 在 一 起 的 ) 基础 上 的 一 个 重 
KBE 

要 想 实 现 这 种 技术 ， 你 只 需要 作为 各 栏 结构 的 aiv 和 少许 CSS， 无 需 多 余 的 容 融 元 素 ， 类 似 
于 前 面 答 试 过 的 为 了 实现 源 代 码 独立 的 浮动 布局 。 

像 往 津 一 样 , 我 们 从 一 组 三 栏 的 结构 开始 讲 起 。 在 这 种 情况 下 ， 页面 上 的 “主要 内 容 ” 放 在 
第 一 栏 ， 而 “ 稍 次 要 的 ”内 容 以 及 导航 链接 放 在 后 面 两 栏 中 。 


<div class="column one">...</div> 
<div class="column two">...</div> 
<div class="column three">...</div> 


自 完 ， 我 们 把 它们 全 部 问 左 浮动 并 设置 一 些 宽 度 值 ( 如 图 4-25 所 示 )。 为 使 事情 简单 化 ， 我 
们 使 用 以 像 隶 为 单位 的 宽度 值 。 不 过 请 注意 ， 使 用 em 或 百分比 的 话 也 一 样 管用 〈 唯 一 的 限制 是 
所 有 的 栏 必须 使 用 同样 的 宽度 单位 ， 而 这 点 也 可 以 商检 )。 

.column {float: left; padding: 0 20px; margin: 0 20px;} 


.two, .three {width: 200px;} 
.one (width: 300px; } 


c "P. POT NE rr " E = 
HD» SS 


ConHugeCo has permanently Spanja 
altered the theory of branding. Dolor sit 


We here at ConHugeCo believe we know that it is 
better to unleash magnetically than to utilize 


transparently. Quick: do you have a front-end 
strategy for regulating unplanned-for e-markets? 
Our technology takes the best features of IIS and 

. The reporting factor is 1000/60/60/24 
171365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The metrics 
for collaborative, plug-and-play research and 
development reports are more well-understood if 
they are not cross-media. Is it more important for 
something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 
of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes the 
best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing are 
more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have to 
e-enable intuitively. 


What do we e-enable? Anything 
and everything, regardless of 
obscureness! Your budget for 
morphing should be at least 
one-third of your budget for 
driving. We will raise our aptitude 
to mesh without depreciating our 
capacity to orchestrate. Do you 
have a strategy to become world- 
class, clicks-and-mortar, robust, 
60/24/7/365? Without 
functionalities, you will lack 
implementation. What does it 
really mean to synergize 
"strategically"? We will cultivate 
the capacity of web services to 
reinvent. It sounds puzzling, but 
it's accurate! 


图 4-25 浮动 3 个 栏 


Amet consectetuer 
Adipiscing elit 

Sed diam 
Nonummy nibh 
Euismod tincidunt 


| Ut laoreet 


Dolore magna 


Aliquam erat 
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E 现在 假设 我 们 想 让 第 一 栏 在 中 间 , LETS LEHRER EHE ( 如 图 4-26 所 示 ), 
那么 还 需要 男 外 两 条 规则 : 


.one {width: 300px; margin-left: 300px;} 
.three (margin-left: -920px;} 


HD SS 


shina tabi We here at ConHugeCo believe we know that it is ConHugeCo has permanently 
Dolor sit better to unleash magnetically than to utilize altered the theory of branding. 
transparently. Quick: do you have a front-end What do we e-enable? Anything 
Amet consectetuer strategy for regulating unplanned-for e-markets? and everything, regardless of 
Adipiscing elit Our technology takes the best features of IIS and obscureness! Your budget for 
Python. The reporting factor is 1000/60/60/24 morphing should be at least 
Sed diam 7/365. What do we revolutionize? Anything and one-third of your budget for 
everything, regardless of obscurity! Your budget for driving. We will raise our aptitude 
enhancing should be at least three times your to mesh without depreciating our 
Euismod tincidunt budget for growing. What does the term "customer- capacity to orchestrate. Do you 
defined, B2B" really mean? We think that most have a strategy to become world- 
Ut laoreet dot-com web sites use far too much class, clicks-and-mortar, robust, 
XMLHttpRequest, and not enough XSL. The metrics 60/24/7/365? Without 


Nonummy nibh 


Dolore magna 


for collaborative, plug-and-play research and functionalities, you will lack 
Aliquam erat development reports are more well-understood if implementation. What does it 


they are not cross-media. Is it more important for really mean to synergize 
something to be synergistic or to be six-sigma? "strategically"? We will cultivate 
Imagine a combination of J++ and HTML. Your the capacity of web services to 
budget for repurposing should be at least one-third reinvent. It sounds puzzling, but 
of your budget for utilizing. it's accurate! 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes the 
best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing are 
more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have to 
e-enable intuitively. 


图 4-26 ”将 第 三 栏 从 右 侧 移 到 左 侧 


UT, MRA. 

那么 它 是 如 何 工作 的 呢 ? 好 吧 , 第 一 栏 左 侧 的 外 边 距 会 把 它 推 开 并 打开 一 大 片 空白 , 这 片 空 
日 刚好 等 于 整个 第 三 栏 的 宽度 ( 即 第 三 栏 的 内 容 、 内 边 距 、 外 边 距 ) 加 上 第 一 栏 原始 的 左 外 边 距 
(20px) 的 总 和 。 人 完成 这 些 以 后 ， 第 三 栏 的 左 外 边 距 会 把 它 疝 左 侧 拉 过 前 面 的 两 栏 ， 并 把 它 放 置 
在 第 一 栏 的 左 外 边 距 之 上 。 这 就 是 全 部 的 工作 了 。 

现在 假设 我 们 希望 第 二 栏 在 左 侧 而 第 三 栏 在 右 侧 ， 因 此 通过 这 种 方式 切换 两 个 侧 栏 ( 如 图 
4-27 所 示 )。 那 么 很 简单 ， 保 留 之 前 的 .one 这 条 规则 ， 去 掉 .three 规 则 并 添加 下 面 这 条 规则 : 

.two {margin-left: -640px;} 

基本 思想 是 完全 相同 的 , 只 需要 确保 左 侧 有 足够 的 空间 可 以 放置 第 二 栏 , 然后 把 第 一 栏 回 右 
侧 拉 过 恰当 的 距离 。 

你 还 可 以 把 这 些 全 都 翻 问 右 侧 : 


.Column {floats right; padding: 0 20px; margins 0 20px;} 
.two, .three (width: 200px;] 

.one (width: 300px; margin-right: 320px;} 

.two (margin-right: -640px;] 


ConHugeCo has permanently 
altered the theory of branding. 
What do we e-enable? Anything 
and everything, regardless of 
obscureness! Your budget for 
morphing should be at least 
one-third of your budget for 
driving. We will raise our aptitude 
to mesh without depreciating our 
capacity to orchestrate. Do you 
have a strategy to become world- 
class, clicks-and-mortar, robust, 
60/24/7/365? Without 
functionalities, you will lack 
implementation. What does it 
really mean to synergize 
"strategically"? We will cultivate 
the capacity of web services to 
reinvent. It sounds puzzling, but 
it's accurate! 


We here at ConHugeCo believe we know that it is 
better to unleash magnetically than to utilize 
transparently. Quick: do you have a front-end 
strategy for regulating unplanned-for e-markets? 
Our technology takes the best features of IIS and 

. The reporting factor is 1000/60/60/24 
[7/365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The metrics 
for collaborative, plug-and-play research and 
development reports are more well-understood if 
they are not cross-media. Is it more important for 
something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 
of your budget for utilizing. 


Lorem ipsum 
Dolor sit 

Amet consectetuer 
Adipiscing elit 

Sed diam 
Nonummy nibh 
Euismod tincidunt 
Ut laoreet 

Dolore magna 


Aliquam erat 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes the 
best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing are 
more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have to 
e-enable intuitively. 


图 4-27 将 第 二 栏 从 中 间 移 到 左 侧 


这 也 不 仅 局 限于 3 栏 的 人 情况， 如果 你 有 4 栏 、5 栏 或 者 更 多 栏 的 话 ， 也 可 以 按 任 何 顺序 重新 排 
列 它 们 。 当 然 , 随 春 栏 数 的 增加 情况 会 变 得 越 来 越 复 杂 。 不 过 , QAR Ta FLT AN HEE TT W, 
对 不 ? 

当然 了 ， 如 果 和 希望 各 栏 在 浏览 需 窗 口中 居中 的 话 ,， 那么 需要 一 个 能 够 包 于 各 栏 的 容 融 ， 类 似 
这 样 : 


.contain {width: 1000px; margin: 0 auto;} 


<div class="contain"> 


<div class="column one">...</div> 
<div class="column two">...</div> 
<div class="column three">...</div> 
</div> 


正如 我 之 前 说 过 的 , 在 这 个 提示 中 之 所 以 使 用 像素 是 因为 它 可 以 使 数学 计算 更 容易 理解 一 点 
儿 。 然 而 ， 这 种 技术 并 不 依赖 于 像素 ,要 想 找 到 流动 布局 的 感 党 ， 你 也 可 以 使 用 基于 百分比 宽度 
的 栏 完成 同样 的 事情 ( 如 图 4-28 所 示 ): 
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Q 


column {float: right; padding: 0 2.5%; margin: 0 2.5%;} 
.two, .three (width: 20%;} 

.one (width: 30%; margin-right: 32.5%;} 

.two {margin-right: -70%;} 


Lorem ipsum 


We here at ConHugeCo believe we know that it is ConHugeCo has permanently 
Dolor sit better to unleash magnetically than to utilize altered the theory of branding. 
transparently. Quick: do you have a front-end What do we e-enable? Anything 
Amet consectetuer strategy for regulating unplanned-for e-markets? and everything, regardless of 
Our technology takes the best features of IIS and obscureness! Your budget for 
Python. The reporting factor is 1000/60/60/24 morphing should be at least 
Sed diam 171365. What do we revolutionize? Anything and one-third of your budget for 
N ibh everything, regardless of obscurity! Your budget for driving. We will raise our aptitude 
dl hl enhancing should be at least three times your to mesh without depreciating our 
Euismod tincidunt budget for growing. What does the term "customer- capacity to orchestrate. Do you 
defined, B2B" really mean? We think that most have a strategy to become world- 
Ut laoreet dot-com web sites use far too much class, clicks-and-mortar, robust, 
XMLHttpRequest, and not enough XSL. The 60/24/7/365? Without 
: metrics for collaborative, plug-and-play research functionalities, you will lack 
Aliquam erat and development reports are more well-understood implementation. What does it 
if they are not cross-media. Is it more important for really mean to synergize 


Adipiscing elit 


Dolore magna 


something to be synergistic or to be six-sigma? "strategically"? We will cultivate 
Imagine a combination of J++ and HTML. Your the capacity of web services to 
budget for repurposing should be at least one-third reinvent. It sounds puzzling, but 
of your budget for utilizing. it's accurate! 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes 
the best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing 
are more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have 
to e-enable intuitively. 


图 4-28 ”基于 百分比 宽度 且 顺 序 任意 的 栏 


4.12 Holy Grall 


Holy Grail 技 术 是 继 “ 唯 一 布局 ”之 后 的 又 一 个 “ 厚 脸皮 ”的 名 字 。 起初, 这 种 技术 是 由 Matthew 
Levine 在 唯一 布局 初次 亮相 后 的 几 个 月 后 发 布 的 , Holy Grail 技 术 是 建立 在 Alex Robinson 的 工作 基 
础 上 的 ， 融 入 你 谦逊 的 作者 的 一 些 贡献 ， 是 一 个 混合 的 流 式 /固定 布局 ， 也 是 独立 于 源 代 码 顺 序 
的 。( 详情 参见 http://alistapart.com/articles/holygrail。 ) 

通过 这 种 方法 ， 在 给 定 3 栏 的 情况 下 ， PPTL Jas E 3 度 而 最 内 层 的 是 流动 的 ， 即 它 可 以 
目 动 扩展 到 任何 可 用 的 空间 。Holy Grail 技 术 站 和 完 由 通常 的 三 栏 qiv 开 始 , 再 加 上 一 个 必需 的 容 策 。 


<div class="contain"> 


<div class="column one">...</div> 
«div class="column two">...</div> 
<div class="column three">...</div> 


</div> 


114 第 4 章 A 局 


像 之 前 一 样 ， 我 们 先 把 第 一 栏 放 在 中 间 。 在 此 基础 上 ,再 把 第 二 栏 放 在 左 侧 并 且 将 第 三 栏 放 
在 右 侧 。 这 些 栏 者 需要 回 定 的 宽度 ， 即 不 依赖 于 百分比 的 宽度 。( 如 采 我 们 想 让 所 有 的 栏 都 基于 
百分比 ， 那 么 使 用 前 面 讨 论 过 的 唯一 布局 就 行 了 。) 我 们 可 以 使 用 像素 ， 不 过 为 了 给 它 再 加 点 儿 
料 ， 这 里 使 用 em 来 实现 。 我 们 将 第 二 栏 的 宽度 设置 为 13 em， 使 第 三 栏 的 宽度 为 15 em. 

Af Y. AAW E13 em 的 在 左 侧 ， 而 15 em 的 在 右 侧 (如 图 4-29 所 示 )。 前 和 完 ， 对 容 带 应 用 
样式 : 


.contain (padding: 0 15em 0 13em; } 


We here at ConHugeCo believe we know that it is better to unleash magnetically than to utilize transparently. 
Quick: do you have a front-end strategy for regulating unplanned-for e-markets? Our technology takes the 


best features of IIS and Python. The reporting factor is 1000/60/60/24/7/365. What do we revolutionize? 
Anything and everything, regardless of obscurity! Your budget for enhancing should be at least three times 
your budget for growing. What does the term "customer-defined, B2B" really mean? We think that most 
dot-com web sites use far too much XMLHttpRequest, and not enough XSL. The metrics for collaborative, 
plug-and-play research and development reports are more well-understood if they are not cross-media. Is it 
more important for something to be synergistic or to be six-sigma? Imagine a combination of J++ and HTML. 
Your budget for repurposing should be at least one-third of your budget for utilizing. 


If all of this comes off as unimagined to you, that's because it is! 


ConHugeCo has revolutionized the abstraction of solutions. We will mesh the aptitude of metrics to seize. 
Without adequate interfaces, solutions are forced to become C2C2C. Our technology takes the best aspects 
of FOAF and Python. Think cyber-interactive. Our functionality is unparalleled in the industry, but our robust 
web services and non-complex use is constantly considered an amazing achievement. What does the term 
"robust" really mean? It sounds mixed-up, but it's true! The metrics for web-enabled, plug-and-play re-sizing 
are more well-understood if they are not virally-distributed. Do you have a game plan to become user-centric? 
If you seize vertically, you may have to e-enable intuitively. 


The systems factor can be summed up in one word: clicks-and-mortar. 


ConHugeCo has permanently altered the theory of branding. What do we e-enable? Anything and everything, 
regardless of obscureness! Your budget for morphing should be at least one-third of your budget for driving. 
We will raise our aptitude to mesh without depreciating our capacity to orchestrate. Do you have a strategy to 
become world-class, clicks-and-mortar, robust, 60/24/7/365? Without functionalities, you will lack 
implementation. What does it really mean to synergize "strategically"? We will cultivate the capacity of web 
services to reinvent. It sounds puzzling, but it's accurate! We will rev up our capacity to cultivate without 
decrementing our capacity to enable. 


Your budget for envisioneering should be at least one-tenth of your budget for upgrading. 


ConHugeCo is the industry leader of B2C2B e-commerce. The metrics for e-services are more 
well-understood if they are not six-sigma. Think cyber-fractal. Your budget for synthesizing should be at least 
one-half of your budget for upgrading. Quick: do you have a scalable scheme for handling unplanned-for 
technologies? We will raise our ability to generate without devaluing our ability to matrix. The metrics for 
re-purposing are more well-understood if they are not viral. We think that most 1000/60/60/24/7/365 web 
applications use far too much AJAX, and not enough JavaScript. We think that most interactive entry pages 
use far too much Flash, and not enough PGP. We think that most sticky web-based applications use far too 
much Rails, and not enough SMIL. 


图 4-29 ”设置 必要 的 内 边 距 


现在 使 各 栏 浮动 并 把 它们 拉 到 预期 的 柳 位 上 。 下 面 的 样式 会 使 第 一 ( 中间 的 ) 栏 填充 容 硕 的 
内 容 区 域 : 


.column {float: left; position: relative; } 
.one (width: 100%; } 


我 们 一 会 儿 再 来 处 理 position: relative;。 现 在 ,我 们 为 这 些 次 要 的 栏 设置 宽度 并 使 它 
们 各 就 各 位 (如 图 4-30 所 示 ): 


.two (width: 13em; margin-left: -100%;} 
.three (width: 15em; margin-right: -15em; } 
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Qtnhargest ChatiugeCo believe we know that it is better to unleash magnetically than to utilize transparently. wer pm 
Aarinianinipialbenasidifeont-end strategy for regulating unplanned-for e-markets? Our technology takes the Dolor sit 
WidbPgthnon. The reporting factor is 1000/60/60/24/7/365. What do we revolutionize? 
Weyéehennbie? éveyirtirigasrégardless of obscurity! Your budget for enhancing should be at least three times Amet consectetuer 
wgaryinmgetrágagdiseis of What does the term "customer-defined, B2B" really mean? We think that most Adipiscing elit 
db&corenesb! sites naeitpettoo much XMLHttpRequest, and not enough XSL. The metrics for collaborative, : 
füugsermhpigystexddrbb ahd development reports are more well-understood if they are not cross-media. Is it Sed diam 
least amedrtad tfoy amtettiged to be synergistic or to be six-sigma? Imagine a combination of J++ and HTML. : 
should be at least one-third of your budget for utilizing. Nonummy nibh 
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Hu nes mixed-up, but it's true! The metrics for web-enabled, plug-and-play re-sizing 
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Kesmiyor ioe ys you may have to e-enable intuitively. 


ree BS Bummed up in one word: clicks-and-mortar. 


Bülilsnenty altered the theory of branding. What do we e-enable? Anything and everything, 
of obscureness! Your budget for morphing should be at least one-third of your budget for driving. 
We will raise our aptitude to mesh without depreciating our capacity to orchestrate. Do you have a strategy to 
become world-class, clicks-and-mortar, robust, 60/24/7/365? Without functionalities, you will lack 
implementation. What does it really mean to synergize "strategically"? We will cultivate the capacity of web 
services to reinvent. It sounds puzzling, but it's accurate! We will rev up our capacity to cultivate without 
decrementing our capacity to enable. 


Your budget for envisioneering should be at least one-tenth of your budget for upgrading. 


ConHugeCo is the industry leader of B2C2B e-commerce. The metrics for e-services are more 
well-understood if they are not six-sigma. Think cyber-fractal. Your budget for synthesizing should be at least 
one-half of your budget for upgrading. Quick: do you have a scalable scheme for handling unplanned-for 
technologies? We will raise our ability to generate without devaluing our ability to matrix. The metrics for 
re-purposing are more well-understood if they are not viral. We think that most 1000/60/60/24/7/365 web 
applications use far too much AJAX, and not enough JavaScript. We think that most interactive entry pages 
use far too much Flash, and not enough PGP. We think that most sticky web-based applications use far too 
much Rails, and not enough SMIL 


图 4-30 —A4- EI. AES 


好 吧 ， 应 该 说 几乎 就 位 了 。 问题 是 左 侧 的 栏 位 置 错 误 ， 它 履 盖 了 主要 的 柱 。 这 是 因为 它 被 我 
们 从 容器 的 最 右 侧 边缘 拉 到 了 最 左 侧 的 边缘 。 知 想 让 它 回 到 正确 的 位 置 , 我们 还 需要 做 一 些 工 作 。 

我 们 需要 把 左 侧 的 栏 癌 左 推 得 更 远 一 点 儿 《〈 如 网 4-31 所 示 )， 推 动 距离 应 该 等 于 它 自 里 的 宽 
度 ， 这 就 是 加 入 position: relative; 的 原因 。 我 们 需要 给 这 一 栏 加 一 个 右 侧 的 俩 移 量 ， 量 人 
等 于 它 需 要 移动 的 距离 ， 也 恰好 等 于 它 目 身 的 客 度 。 

.two (width: 13em; margin-left: -100%; right: 13em;} 

HE. WHEW Aleft: -13em; 也 可 能 达到 同样 的 效果 。 

这 些 就 已 经 是 这 个 技术 的 全 部 了 。 我 们 只 不 过 是 把 次 要 的 各 栏 拉 到 容 融 的 内 边 距 之 上 ， 就 什 
么 问题 都 没有 了 。 当 然 , 如 果 我 们 为 各 栏 设 置 了 外 边 距 和 内 边 距 的 话 ,， 那么 就 有 更 多 的 数学 计算 
要 做 了 ， 不 过 原理 还 是 一 样 的 。 

例如 ,假设 我 们 想 把 侧 栏 推 到 离 内 容 远 一 点 儿 的 地 方 ， 那么 过 修改 中 间 栏 来 实现 ,并 
使 用 边框 和 内 边 距 的 组 合 


.Contain {padding: 0 2em; border: lem solid white; border-width: 0 15em 0 13em;} 


注意 现在 我 们 在 两 仙 有 了 硕大 的 边框 ， 开 两 栏 之 间 的 空 际 的 。 元素 的 内 边 距 是 用 
m 内 推 得 更 二 的 ， 因 此 离 侧 栏 也 就 更 远 
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accurate! regardless of obscureness! Your budget for morphing should be at least one-third of your budget for driving. 
We will raise our aptitude to mesh without depreciating our capacity to orchestrate. Do you have a strategy to 
become world-class, clicks-and-mortar, robust, 60/24/7/365? Without functionalities, you will lack 
implementation. What does it really mean to synergize "strategically"? We will cultivate the capacity of web 
services to reinvent. It sounds puzzling, but it's accurate! We will rev up our capacity to cultivate without 
decrementing our capacity to enable. 


Nonummy nibh 


Aliquam erat 


The systems factor can be summed up in one word: clicks-and-mortar. 


Your budget for envisioneering should be at least one-tenth of your budget for upgrading. 


ConHugeCo is the industry leader of B2C2B e-commerce. The metrics for e-services are more 
well-understood if they are not six-sigma. Think cyber-fractal. Your budget for synthesizing should be at least 
one-half of your budget for upgrading. Quick: do you have a scalable scheme for handling unplanned-for 
technologies? We will raise our ability to generate without devaluing our ability to matrix. The metrics for 
re-purposing are more well-understood if they are not viral. We think that most 1000/60/60/24/7/365 web 
applications use far too much AJAX, and not enough JavaScript. We think that most interactive entry pages 
use far too much Flash, and not enough PGP. We think that most sticky web-based applications use far too 
much Rails, and not enough SMIL 


图 4-31 3 个 栏 全 部 就 位 了 


这 意味 着 我 们 还 需要 调整 与 侧 栏 位 置 相 关 的 样式 。 对 于 第 二 栏 〈 即 本 例 中 最 左 侧 的 栏 )， 我 
们 只 需要 增加 它 的 zight 值 使 之 为 栏 的 宽度 (同时 也 是 中 间 栏 的 左 侧 边框 的 宽度 ) 与 中 间 栏 的 左 
侧 内 边 距 之 和 。 


.two (width: 13em; margin-left: -100%; right: 15em;} 


对 于 最 右 侧 的 栏 , 你 可 能 打算 只 增 大 右 侧 外 边 距 的 负 值 。 然 而 , 这 不 一 定 总 能 起 作用 。 相 反 ， 
我 们 别 去 管 外 边 距 ， 添 加 一 个 左 侧 的 俩 移 量 就 行 了 


.three (width: 15em; margin-right: -15em; left: 2em;} 


当然 ， 负 的 右 侧 偏 移 量 也 可 以 实现 。 无 论 哪 种 方式 ， 我 们 都 会 得 到 图 4-32 所 示 的 结果 。 

人 只 需要 简单 地 为 
中 间 栏 设置 边框 颜色 。 

我 们 可 能 还 需要 做 一 件 事 ， 那 就 是 防止 这 个 设计 变 得 太 罕 ， 这 可 以 通过 为 页 面 bodqy 设 置 一 
点 儿 样 式 来 实现 。 

body {min-width: 50em; } 

这 样 设置 之 后 ， body JL BLN HE7F T50 em T. 这 意味 着 两 侧 可 以 有 足够 的 空间 放置 侧 栏 ， 
并 且 还 有 剩余 的 22 em 留 给 中 间 栏 。 当 然 , 这 个 值 可 以 任意 设置 , 然而 如 果 设 置 成 em 之 外 的 单位 ， 
那么 你 将 无 法 确定 最 终 的 结果 。 


ConHugeCo has 
permanently altered the 
theory of branding. What do 
we e-enable? Anything and 
everything, regardless of 
obscureness! Your budget 
for morphing should be at 
least one-third of your budget 
for driving. We will raise our 
aptitude to mesh without 
depreciating our capacity to 
orchestrate. Do you have a 
strategy to become world- 
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robust, 60/24/7/365? Without 
functionalities, you will lack 
implementation. What does it 
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sounds puzzling, but it's 
accurate! 


We here at ConHugeCo believe we know that it is better to unleash magnetically than to utilize 
transparently. Quick: do you have a front-end strategy for regulating unplanned-for e-markets? Our 
technology takes the best features of IIS and Python. The reporting factor is 1000/60/60/24/7/365. 
What do we revolutionize? Anything and everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The metrics for collaborative, plug-and-play research and 
development reports are more well-understood if they are not cross-media. Is it more important for 
something to be synergistic or to be six-sigma? Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third of your budget for utilizing. 


If all of this comes off as unimagined to you, that's because it is! 


ConHugeCo has revolutionized the abstraction of solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are forced to become C2C2C. Our technology takes 
the best aspects of FOAF and Python. Think cyber-interactive. Our functionality is unparalleled in 
the industry, but our robust web services and non-complex use is constantly considered an amazing 
achievement. What does the term "robust" really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing are more well-understood if they are not virally- 
distributed. Do you have a game plan to become user-centric? If you seize vertically, you may have 
to e-enable intuitively. 


The systems factor can be summed up in one word: clicks-and-mortar. 


Lorem ipsum 
Dolor sit 

Amet consectetuer 
Adipiscing elit 

Sed diam 
Nonummy nibh 
Euismod tincidunt 
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ConHugeCo has permanently altered the theory of branding. What do we e-enable? Anything and 
everything, regardless of obscureness! Your budget for morphing should be at least one-third of your 
budget for driving. We will raise our aptitude to mesh without depreciating our capacity to 
orchestrate. Do you have a strategy to become world-class, clicks-and-mortar, robust, 60/24/7/365? 
Without functionalities, you will lack implementation. What does it really mean to synergize 
"strategically"? We will cultivate the capacity of web services to reinvent. It sounds puzzling, but it's 
accurate! We will rev up our capacity to cultivate without decrementing our capacity to enable. 


Your budget for envisioneering should be at least one-tenth of your budget for upgrading. 


ConHugeCo is the industry leader of B2C2B e-commerce. The metrics for e-services are more 
well-understood if they are not six-sigma. Think cyber-fractal. Your budget for synthesizing should be 
at least one-half of your budget for upgrading. Quick: do you have a scalable scheme for handling 
unplanned-for technologies? We will raise our ability to generate without devaluing our ability to 
matrix. The metrics for re-purposing are more well-understood if they are not viral. We think that 


: most 1000/60/60/24/7/365 web a pp lications use far too much AJA ' and not enoug h JavaScri pt. We 


图 4-32” 田 外 一 种 放置 右 侧 栏 的 方式 


4.13 ANIK 


流 式 网 格 技术 ( Fluid Grids ) 最 初 是 由 Ethan Marcotte 提 出 的 ( 见 http://alist apart.com/articles/ 
fluidgrids )， 可 以 将 严格 的 基于 网 格 的 布局 转换 成 更 加 流动 的 结构 ， 可 以 使 用 百分比 和 em 的 任意 
混合 来 实现 。 还 有 更 棒 的 ， 你 可 以 随时 将 这 种 混合 从 em 改 为 其 他 任何 度量 单位 。 

不 过 ， 首 先 让 我 们 从 像素 开始 讲 起 吧 。 

真 的 ， 从 一 个 已 完成 的 设计 (譬如 在 Photoshop 中 ) 人 手 是 最 简单 的 ， 可 以 直接 在 那里 开始 
量 取 。 你 最 后 不 会 使 用 任何 像素 度量 ， 不 过 没关系 ， 一 切 都 可 以 正 浓 工作 。 

首先 ， 图 4-33 展 示 了 一 个 布局 图 样 (mockup )， 上 面 有 一 些 “顶层 的 ”度量 标注 。 

现在 来 做 算术 ， 如 有 果 我 们 将 所 有 数字 加 起 来 会 得 到 1010 px。 现 在 我 们 只 需 把 每 个 数字 
1010 以 得 到 合适 的 百分比 值 。 

不 过 , 等 一 等 ! 我 们 应 该 怎样 分 割 空 
之 间 均 匀 地 分 配 70 px, 

老实 说 ， 


除 以 


日 的 部 分 呢 ?” 是 用 外 边 距 
naa a a A 

ee a 可 能 取决 于 特定 的 设计 , 也 很 容易 依赖 个 人 品味 。 
areal. aus, E 


还 是 内 边 距 呢 ? EDI Soc 
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#extra 


——190px— 


10pX 


Ia 5px 


4» 


图 4-33 ”展示 页 面 的 布局 需求 


以 像素 为 单位 ， 将 产生 如 下 代码 : 


#contain (width: 1010px;} 

#main, #extra {float: left;} 

main (width: 715px; padding: 20px 35px 20px 25px;1! 
dextra (width: 190px; padding: 20px 10px 20px 35px; } 


注意 ， 我 们 在 把 这 些 全 部 除 以 1010 px。 这 将 得 到 ( 如 图 4-34 所 示 ): 


#contain {width: 1010px;} 

#main, dextra {float: left;} 

#main (width: 70.792%; padding: 1.98% 3.465% 1.98% 2.475%; } 
#extra (width: 18.812%; padding: 1.98% 9.9% 1.98% 3.465%; } 


是 的 ， 此 时 你 还 没有 处 理 容 需 元 素 。 这 可 以 确保 在 组 建 布局 时 一 切 尽 在 掌握 之 中 ， 确 保 元 素 
都 能 落 在 预期 的 地 方 。 
现在 看 一 下 #main 内 部 元 又 的 度量 ( 如 图 4-35 所 示 )。 
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Following on my "HTMLS vs. Flash" talk of a couple of weeks ago, I'm hoping to do a bit of blogging about HTMLS, 
Flash, mobile apps, and more. But first | need to get some terminology straight. 


As | did in my talk, I'm going to refer to the collection of front-end web-standards technologies—(X)HTML (of any flavor). 
CSS, and JavaScript—as "the web stack". I've seen the term used here and there and it makes the most sense to me as 
a condensed verbal shorthand. It beats writing out the specific technologies every time or trying to use similarly clumsy 
constructions like “front-end tech". If you like, think of “web stack" as a rough equivalent to “Ajax"—a term that was 
invented because continually saying "asynchronous JavaScript + CSS + DOM + XMLHttpRequest" was unworkable. 


The web stack sort of includes downloadable fonts, but only in the same sense that images or any other external 
resource is part of the stack. Similarly, it encompasses frameworks like jQuery in the sense that they're built out of the 
components of the web stack. 


When | use the term “web stack", though, I’m not referring to back-end technologies. Those things are important, 
certainly, but not from the front-end point of view. A browser doesn't care if your page was generated by PHP, Django. 
Rails, Perl, or what have you. It doesn't even care if the server runs on Apache or something else. 


Furthermore, it doesn't refer to plugins. Yes, that means Flash, but it also means QuickTime, Real, ActiveX, and so forth. 
What | need to make clear is that I'm not doing this in an attempt to imply that plugins don't belong on the web at all. 


图 4-34 ”布局 中 两 个 主 栏 的 放置 
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Technorati OO PX 
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好 了 ， 现 在 把 它们 变 成 一 些 CSS 。 


#main h2 (width: 575px; padding-left: 140px;} 
#main .info {float: left; width: 95px;} 
#main .text {float: right; width: 575px;} 


注意 ,在 .info 和 .text 之 间 我 没有 定义 任何 分 隔 符 ， 这 是 因为 它们 是 分 别 癌 不 同 的 方 癌 浮 
动 的 ， 所 以 我 们 可 以 依赖 于 它们 的 相互 分 离 保 持 其 间隔 。 现 在 我 们 将 所 有 像素 长 度 除 以 715 px, 
即 #main 的 宽度 。 由 此 可 以 产生 下 面 的 CSS， 结 果 为 图 4-36 中 所 展示 的 效果 。 


80.4196%; padding-left: 19.5804%;} 
left; width: 13.2867%; } 
right; width: 80.4196$;] 


#main h2 (width: 
.info float: 
.text (float: 


#main 
#main 
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Following on my "HTMLS vs. Flash" talk of a couple of weeks ago, I'm hoping to do a bit of 
blogging about HTMLS5, Flash, mobile apps, and more. But first | need to get some terminology 
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writing out the specific technologies every time or trying to use similarly clumsy constructions ‘ike 


“front-end tech”. If you like, think of “web stack" as a rough equivalent to “Ajax"—a term that was 
invented because continually saying “asynchronous JavaScript + CSS + DOM + 
XMLHttpRequest” was unworkable. 


The web stack sort of includes downloadable fonts, but only in the same sense that images or 
any other external resource is part of the stack. Similarly, it encompasses frameworks like jQuery 
in the sense that they're built out of the components of the web stack. 


When | use the term "web stack”, though, I’m not referring to back-end technologies. Those 


things are important, certainly, but not from the front-end point of view. A browser doesn't care if 
your page was generated by PHP, Django, Rails, Perl, or what have you. It doesn't even care if 
the server runs on Apache or something else. 


Furthermore, it doesn't refer to plugins. Yes, that means Flash, but it also means QuickTime, 
Real, ActiveX, and so forth. What | need to make clear is that I’m not doing this in an attempt :o 
imply that plugins don't belong on the web at all. They're just not part of that core web stack any 
more than the web stack is part of them. That doesn't stop them working together, obviously. 


Okay, so that's out of the way, and | hope my meaning is sufficiently clear to everyone. Please do 


F ray a ~ 


Recently Tweetecbe more 
Apparently | was the 
only one using 
GXmlHttp in the 
Google Maps API, 
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图 4-36 ”使 用 百分比 恰当 地 安置 页 面 片 段 


这 里 还 有 一 
问题 。 

你 或 许 会 想 : 使 用 如 此 完美 的 像素 值 时 ,为 什么 还 要 Vd 
fi TRI AER EE QR HU SEE, VU PURA ESSE EXC "P 


#contain (width: 70em;) 


或 者 甚至 这 样 : 


点 关于 各 栏 垂 下 对齐 的 工作 要 做 ， 不 过 一 点 儿 顶 部 外 边 距 承 能 立马 解决 所 有 


计算 呢 ? 那 是 因为 现在 我 
正确 的 相对 大 小 。 例 如 : 


4.14 基于 em 的 布局 121 


#contain {width: 90%; margin: 0 5%;} 
全 世界 都 是 你 的 地 盘 了 。 然 而 ， 如 末 这 人 么 做 的 话 ， 一 定 别 让 你 的 “地 盘 ” 太 小 了 ， 比 如 : 


#contain (width: 90%; min-width: 960px; margin: 0 5%; } 


414 基于 em 的 布局 


这 种 技术 跟 流 式 布 局 技术 极其 相似 ， 只 不 过 布局 尺寸 是 以 em 而 非 百分比 作为 单位 的 。 
像 前 面 一 样 , 我 们 从 一 个 有 着 “顶层 的 ”度量 标注 的 布局 图 样 开始 讲 起 , 还 有 一 些 相关 的 CSS 
( 如 图 4-37 所 示 )。 


#contain (width: 1010px;} 

#main, #extra (float: left;) 

#main {width: 715px; padding: 20px 35px 20px 25px; } 
#extra (width: 190px; padding: 20px 10px 20px 35px;} 


全 站 (Q tx.) (A) F3. http: //meyerweb.com/ 
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#extra 
—-90px—— 


图 4-37 展示 整个 设计 的 布局 大 小 


很 好 ， 再 来 一 次 数学 计算 吧 。 这 一 次 ,我 们 把 这 些 数字 按照 页 面 中 使 用 的 “基准 ”字号 大 小 
进行 划分 。 这 通常 是 body 元 素 或 者 html 元 素 的 字号 大 小 。 如 果 你 下 决心 放弃 使 用 所 有 的 
font-size, 那么 浏览 右 的 基准 字号 大 小 绝 大 多 数 情 况 下 会 是 16 px, 因为 这 是 默认 的 偏好 设置 并 
有 几乎 从 来 没有 人 改过 它 。 男 一 方面 ， 如 果 声 明了 类 似 body (font-size: 0.8215em; } 这 样 的 
规则 ， 那 么 设置 的 基准 字号 就 是 13 px 了 。 


122 


一 旦 确定 了 基准 ,就 可 以 用 全 部 的 这 些 像素 度量 除 以 那个 基准 值 了 ， 结 琳 将 会 以 em 为 单位 。 


第 4 草 


A 局 


因此 ， 假 设 基准 为 13 px: 


#contain {width: 
#extra {float: 


#main 


, 


#main (width: 


dextra (width: 


55em; padding: 


77.692em;) 
left; } 


14.615em; padding: 


现在 处 理 #main 里 面 的 部 分 : 


#main h2 (width: 575px; padding-left: 140px;} 
#main .info [float: left; width: 95px; } 
#main .text {float: right; width: 575px;} 


再 一 次 ， 我 们 把 它们 全 部 都 除 以 13 (如 图 4-38 所 示 ): 


#main 
#main 


Lnfo {floats 
.text (float: 


Archives 


CSS 


left; width: 7.308em; } 
right; width: 44.231em;) 
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1.538em 2.692em 1.538em 1.923em;) 
1.538em 0.769em 1.538em 2.692em;) 
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Following on my "HTMLS vs. Flash" talk of a couple of weeks ago, l'm hoping to do a bit of blogging 
about HTML5, Flash, mobile apps, and more. But first | need to get some terminology straight. 


As | did in my talk, I'm going to refer to the collection of front-end web-standards technologies 
—(X)HTML (of any flavor), CSS, and JavaScript—as "the web stack”. I've seen the term used here 
and there and it makes the most sense to me as a condensed verbal shorthand. It beats writing out 
the specific technologies every time or trying to use similarly clumsy constructions like “front-end 
tech". If you like, think of "web stack" as a rough equivalent to “Ajax"—a term that was invented 
because continually saying “asynchronous JavaScript + CSS + DOM + XMLHttpRequest" was 
unworkable. 


The web stack sort of includes downloadable fonts, but only in the same sense that images or any 
other external resource is part of the stack. Similarly, it encompasses frameworks like jQuery in the 
sense that they're built out of the components of the web stack. 


When | use the term "web stack", though, l'm not referring to back-end technologies. Those things 
are important, certainly, but not from the front-end point of view. A browser doesn't care if your page 
was generated by PHP, Django, Rails, Perl, or what have you. It doesn't even care if the server runs 
on Apache or something else. 


Furthermore, it doesn't refer to plugins. Yes, that means Flash, but it also means QuickTime, Real, 
ActiveX, and so forth. What | need to make clear is that l'm not doing this in an attempt to imply that 
plugins don't belong on the web at all. They're just not part of that core web stack any more than the 
web stack is part of them. That doesn't stop them working together, obviously. 


Okay, so that's out of the way, and | hope my meaning is sufficiently clear to everyone. Please do 
leave a comment if it isn't. Onward! 


Web 2.0 Talk: HTML5 vs. Flash 
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Recently Tweetedses more 
Apparently | was the 
only one using 
GXmlHttp in the Google 
Maps APl, because it's 


gone in v3 and has no 
equivalent. Curses. 
-tweeted 20 hours, 13 


14-38 ”通过 em 恰当 地 放置 大 多 数 页 面 片 段 


你 可 能 注意 到 了 ,我 把 包含 整个 标题 的 二 级 标题 元 系 (h2 ) 忽略 ,这 是 因为 二 级 标题 中 的 
文本 字号 要 比 玩 认 的 字号 大 ， 因 此 不 能 简单 地 除 以 13。 证 我 们 看 看 在 CSS 的 其 他 地 方 给 它 设 置 了 
AME. 


4.14 基于 em 的 布局 123 


h2 (font-size: 1.6em;] 


好 了 ，, 那么 它 的 字号 大 小 应 为 13 x 1.6, 或 者 说 是 20.8。 因 此 我 们 需要 把 它 的 两 个 度量 值 都 除 
以 20.8( 如 图 4-39 所 示 )。 


#main h2 (width: 27.644em; padding-left: 6.731em;]j 
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Following on my "HTMLS vs. Flash" talk of a couple of weeks ago, I'm hoping to do a bit of blogging Flickr 

about HTML5, Flash, mobile apps, and more. But first | need to get some terminology straight. bec 
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and there and it makes the most sense to me as a condensed verbal shorthand. It beats writing out 

the specific technologies every time or trying to use similarly clumsy constructions like “front-end An Event Apart 
tech". If you like, think of “web stack” as a rough equivalent to “Ajax"—a term that was invented Complex Spiral 
because continually saying “asynchronous JavaScript + CSS + DOM + XMLHttpRequest" was Consulting 


unworkable. CSS Sculptor 
css-discuss 


The web stack sort of includes downloadable fonts, but only in the same sense that images or any Microformats 
other external resource is part of the stack. Similarly, it encompasses frameworks like jQuery in the 
sense that they're built out of the components of the web stack. 


Projects Elsewhere 
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When | use the term “web stack", though, I'm not referring to back-end technologies. Those things 
are important, certainly, but not from the front-end point of view. A browser doesn't care if your page 
was generated by PHP, Django, Rails, Perl, or what have you. It doesn't even care if the server runs 
on Apache or something else. 


Furthermore, it doesn't refer to plugins. Yes, that means Flash, but it also means QuickTime, Real, 
ActiveX, and so forth. What | need to make clear is that I'm not doing this in an attempt to imply that 
plugins don't belong on the web at all. They're just not part of that core web stack any more than the 
web stack is part of them. That doesn't stop them working together, obviously. 


Okay, so that's out of the way, and | hope my meaning is sufficiently clear to everyone. Please do 
leave a comment if it isn't. Onward! 


Web 2.0 Talk: HTMLS vs. Flash 


图 4-39 ”更 正 标题 的 放置 位 置 


Fray Contributor 


Recently Tweetedsee more 
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党 无 疑问 , 这 里 的 数学 计算 确实 有 ^U LRN 了。 这 里 最 美妙 的 部 分 就 是 你 可 以 把 文档 的 基准 
字 扎 缩小 或 放大 ， 而 整个 布局 也 会 随 之 进行 缩放 。 人 例如， 假设 你 把 CSS 改 成 : 

body {font-size: 90%;} 

这 会 使 整个 布局 随 着 文本 一 起 增 大 , 也 就 意味 着 每 行 的 长 度 可 以 基本 保持 一 致 。 整 个 布局 是 
关联 在 一 起 的 , 它 对 于 任何 具有 不 同 浏览 各 默 认 设 置 的 用 户 , 以 及 由 于 易 读 性 的 原因 喜欢 调整 文 
本 字号 的 用 户 来 说 都 具有 很 好 的 可 伸缩 性 。 

然而 ,在 图 4-40 中 可 以 很 明显 地 看 出 ， 这 并 不 意味 痢 布 局 可 以 比 浏览 各 窗口 还 党 。 这 是 基于 
em 的 布局 的 一 个 淤 在 缺点 ， 而 且 并 不 是 很 好 处 理 。 事 实 上， 整个 基于 em 布局 的 核心 思想 就 是 保 
持 每 行 的 长 度 以 及 相对 放置 位 置 , 无 论 浏 览 融 窗口 多 大 或 多 小 。 如 果 这 个 思想 不 适合 你 ,那么 基 
于 em 的 布局 也 就 不 适合 你 了 
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tech". If you like, think of “web stack" as a rough equivalent to "Ajax'—a term that was invented Complex Sp 
because continually saying “asynchronous JavaScript + CSS + DOM + XMLHttpRequest” was Consultin| 


unworkable. CSS Sculpti 
css-discuss} 


The web stack sort of includes downloadable fonts, but only in the same sense that images or any - inna 
other external resource is part of the stack. Similarly, it encompasses frameworks like jQuery in the 
sense that they're built out of the components of the web stack. 


When | use the term “web stack", though, l'm not referring to back-end technologies. Those things 
are important, certainly, but not from the front-end point of view. A browser doesn't care if your page 
was generated by PHP, Django, Rails, Perl, or what have you. It doesn't even care if the server runs 
on Apache or something else. 


Furthermore, it doesn't refer to plugins. Yes, that means Flash, but it also means QuickTime, Real, 
ActiveX, and so forth. What | need to make clear is that l'm not doing this in an attempt to imply that 
plugins don't belong on the web at all. They're just not part of that core web stack any more than the 
web stack is part of them. That doesn't stop them working together, obviously. 
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图 4-40“” 当 浏 览 硕 窗口 过 罕 时 出 现 了 水 平 滚动 条 


这 种 方法 还 可 以 扩展 ,使 图 像 大 小 也 随 文本 大 小 变化 。 假 设 有 一 个 88 px 宽 的 网 像 ， 把 它 除 
以 文本 的 字号 大 小 〈 仍 假设 为 16 px )， 然 后 用 结果 值 再 给 它 设置 党 度 ， 就 像 这 样 : 

<img src="btn07.png" alt="XFN Friendly" style="width: 5.5em;"> 

弄 好 这 个 之 后 , 图像 的 大 小 就 会 随 看 字号 的 大 小 改变 。 显然 , 没有 必要 对 每 个 图 像 都 进行 这 
样 的 处 理 ， 不 过 对 于 市 ( section ) 标题 或 者 其 他 相互 协调 的 图 像 来 说 就 非常 有 用 了 了。 


4.15 ”文档 流 中 的 负 外 边 距 


外 边 距 可 以 很 好 地 使 元 素 之 间 保 持 距 离 , 不 过 你 知道 负 外 边 距 可 以 拉 近 元 素 间 的 距离 ,其 至 
完全 “ 漫 过 ”其 距离 吗 ? 

举 个 简单 的 例子 , 假设 在 一 个 页 面 中 , 你 总 是 希望 某 个 跟随 在 二 级 标题 h2 后 面 的 元 素 可 以 在 
二 级 标题 的 下 面 出 现 。 最 常见 的 情况 就 是 非 空 行 开头 的 第 一 段 出 现在 它 前 面 的 标题 之 下 。 有 一 个 
办 法 ,就 是 使 用 相 邻 兄弟 选择 标题 C 见 2.18 市 )。 男 外 一 个 办 法 如 图 4-41 所 示 ， 就 是 在 二 级 标题 上 
应 用 一 个 底部 的 负 外 边 距 。 


h2 {border-bottom: 1px solid; font-size: 150%; margin-bottom: -0.67em;) 
p {margin: lem 0;} 
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The Web Stack 


Following on my "HTMLS vs. Flash" talk of a couple of weeks ago, I'm hoping t 
more. But first | need to get some terminology straight. 


As | did in my talk, I'm going to refer to the collection of front-end web-standard 
JavaScript—as “the web stack”. I've seen the term used here and there and it 
It beats writing out the specific technologies every time or trying to use similarl 
"web stack" as a rough equivalent to "Ajax'—a term that was invented becau 
XMLHttpRequest" was unworkable. 


The web stack sort of includes downloadable fonts, but only in the same sense 
Similarly, it encompasses frameworks like jQuery in the sense that they're built 


图 4-41 将 标题 及 紧 随 其 后 的 元 素 徘 在 一 起 


你 可 能 以 为 这 个 段落 缺少 项 部 外 边 距 , 但 事实 不 是 这 样 的 。 它 是 有 顶部 外 边 距 的 ， 只 不 过 与 
二 级 标题 重 琶 了, 因为 二 级 标题 确 部 外 边 距 的 边 绿 实际 上 是 接近 二 级 标题 的 文本 顶部 的 。 段 落 以 
及 它 的 外 边 距 位 于 二 级 标题 的 底部 外 边 距 之 下 ， 而 不 是 位 于 二 级 标题 的 边框 之 下 。 

我 们 可 以 用 这 种 普通 的 技术 使 一 些 内 容 “ 在 同一 行 上 ”， 之 所 以 加 了 引号 是 因为 它们 只 是 在 
视觉 上 对 齐 了 而 已 。 考 虑 下 面 的 代码 : 

<ul class="jump"> 

«li class="prev"><a href="ch03.html">Salaries</a></li> 


<li class="next"><a hrefs"'ch05.html"'-Punching the Clock</a></li> 
</ul> 


现在 假设 我 们 希望 它们 “并 肩 ” 排 列 成 一 行 ， 如 图 4-42 所 示 。 我 们 可 以 让 它们 都 浮动 ， 不 过 
还 有 为 一 个 办 法 。 
ul.jump {list-style: none; line-height: 1; width: 25em; 


margin: 0 auto; padding: 0.25em lem; border: 1px solid; } 
li.next (text-align: right; margin-top: -1em; } 


Salaries Punching the Clock 


图 4-42 KAARE 


1i .next 的 -1 em 的 顶部 外 边 距 恰好 可 以 把 它 向 上 拉 过 正确 的 距离 ( 因为 我 们 已 经 将 这 个 元 
素 的 行 高 定义 为 1 了 )。 

另 一 个 有 用 的 技巧 就 是 把 元 素 拉 出 它 的 容器 一 部 分 。 假 设 你 希望 将 一 个 节 标 题 放 在 一 个 两 侧 
是 断 开 实 线 的 框 里 ( 如 图 4-43 所 示 )， 下 面 是 相关 的 标记 和 CSS : 


.entry {border-top: 1px solid gray; } 
.entry h2 (width: 80$; background: #FFF; border: 1px solid gray; 
margin: -0.67em auto 0; text-align: center; } 


<div class="entry"> 
<h2>The Web Stack</h2> 


</div> 


The Web Stack “上 一 


Following on my “HTMLS5 vs. Flash" talk of a couple of weeks ago, l'm hoping to do a bit of blogging about HTML5, Flash, mobile apps, and 
more. But first | need to get some terminology straight. 


As | did in my talk, l'm going to refer to the collection of front-end web-standards technologies—(X)HTML (of any flavor), CSS, and 
JavaScript—as "the web stack". I've seen the term used here and there and it makes the most sense to me as a condensed verbal shorthand. 
It beats writing out the specific technologies every time or trying to use similarly clumsy constructions like "front-end tech". If you like, think of 
"web stack" as a rough equivalent to “Ajax"—a term that was invented because continually saying "asynchronous JavaScript + CSS + DOM + 
XMLHttpRequest" was unworkable. 


The web stack sort of includes downloadable fonts, but only in the same sense that images or any other external resource is part of the stack. 


Similarly, it encompasses frameworks like jQuery in the sense that they're built out of the components of the web stack. 


When | use the term "web stack", though, l'm not referring to back-end technologies. Those things are important, certainly, but not from the 
front-end point of view. A browser doesn't care if your page was generated by PHP, Django, Rails, Perl, or what have you. It doesn't even care 
if the server runs on Apache or something else. 


Furthermore, it doesn't refer to plugins. Yes, that means Flash, but it also means QuickTime, Real, ActiveX, and so forth. What | need to make 
clear is that l'm not doing this in an attempt to imply that plugins don't belong on the web at all. They're just not part of that core web stack any 
more than the web stack is part of them. That doesn't stop them working together, obviously. 


Okay, so that's out of the way, and | hope my meaning is sufficiently clear to everyone. Please do leave a comment if it isn't. Onward! 


图 4-43 ”在 一 个 断 开 的 实 线 上 居中 显示 标题 


另 一 方面 ， 你 可 能 希望 这 个 框 “收缩 包 庄 ”内 部 的 文本 ， 而 不 是 使 用 预先 定义 的 宽度 。 如 果 
是 这 样 的 话 ， 你 需要 再 加 一 点 儿 标 记 ， 不 过 注意 是 只 加 一 点 儿 : 


<div class="entry"> 
<h2><span>The Web Stack</span></h2> 


</div> 
然后 再 对 CSS 进 行 一 点 儿 小 更 改 (如 图 4-44 所 示 ): 


.entry h2 {margin-top: -0.67em; text-align: center; } 
.entry h2 span (background: #FFF; border: 1px solid gray; padding: 0.25em lem; } 


| The Web Stack | 


Following on my “HTMLS5 vs. Flash" talk of a couple of weeks ago, l'm hoping to do a bit of blogging about HTMLS5, Flash, mobile apps, and 
more. But first | need to get some terminology straight. 


As | did in my talk, l'm going to refer to the collection of front-end web-standards technologies—(X)HTML (of any flavor), CSS, and 
JavaScript—as "the web stack". l've seen the term used here and there and it makes the most sense to me as a condensed verbal shorthand. 
It beats writing out the specific technologies every time or trying to use similarly clumsy constructions like “front-end tech". If you like, think of 
"web stack" as a rough equivalent to "Ajax"—a term that was invented because continually saying "asynchronous JavaScript + CSS + DOM + 
XMLHttpRequest" was unworkable. 


The web stack sort of includes downloadable fonts, but only in the same sense that images or any other external resource is part of the stack. 
Similarly, it encompasses frameworks like jQuery in the sense that they're built out of the components of the web stack. 


When | use the term "web stack", though, l'm not referring to back-end technologies. Those things are important, certainly, but not from the 
front-end point of view. A browser doesn't care if your page was generated by PHP, Django, Rails, Perl, or what have you. It doesn't even care 
if the server runs on Apache or something else. 


Furthermore, it doesn't refer to plugins. Yes, that means Flash, but it also means QuickTime, Real, ActiveX, and so forth. What | need to make 
clear is that l'm not doing this in an attempt to imply that plugins don't belong on the web at all. They're just not part of that core web stack any 
more than the web stack is part of them. That doesn't stop them working together, obviously. 


Okay, so that's out of the way, and | hope my meaning is sufficiently clear to everyone. Please do leave a comment if it isn't. Onward! 


图 4-44 3Bn—^ HE "Wem BE” 标题 文 本 


大 功 告 成 了 ! 
当然 ， 只 要 文本 设 有 超过 一 行 的 话 就 不 会 有 问题 。 如 采 它 变 成 了 两 行 , ABA ELS MUST 
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线 上 掉 下 来 ,而 不 会 自己 重新 大 中 ,并且 这 个 框 会 在 两 条 线 之 间 分 开 。 这 种 情况 实在 不 适合 使 用 
负 外 边 距 来 解决 。 你 可 以 放弃 边框 并 保持 日 色 的 背景 ,虽然 不 是 很 完美 , 但 是 已 经 够 好 的 了 。 


416 ”在 特定 的 上 下 文中 使 用 定位 


有 一 件 事 是 本 章 至 今 还 没有 真正 讨论 到 的 , 那 就 是 定位 的 使 用 。 那 是 因为 定位 〈 在 这 种 情况 
下 我 指 的 是 绝对 定位 ) 通 仙 对 于 大 规模 的 布局 来 说 是 很 粳 糕 的 选择 。 虽 然 不 总 是 很 糟糕 ， 不 过 一 
OL Pb. 

V AL WATE bz SPCR, 那么 它 就 整个 从 标准 文档 流 中 脱离 了 。 这 意味 春 无 论 它 
在 哪里 ， 其 他 元 素 都 会 当 它 不 存在 。 因 此 ， 绝 对 定位 通常 会 使 内 容 相 互 重 辣 。 

这 应 该 算是 一 种 “耻辱 ”"， 因 为 如 末 可 以 定位 (比如 页 面 中 的 各 栏 ) 且 不 用 担心 它们 会 把 页 
ACEEA, HABRAN RE, 

然而 ， 别 灰心 : 在 特定 的 上 下 文中 也 可 以 简单 地 使 用 绝对 定位 ， 比 如 页 头 或 页 脚 中 。 考 虑 这 
个 页 头 的 标记 : 


<div class="header"> 

<a href="/"><img src="logo.png" alt="ConHugeCo Inc."></a> 
<ul class="nav"> 

<li><a href="index.html">Home</a></1i> 

<li><a href="products.html">Products</a></1li> 
<li><a href="buy.html"sBuy!</a></1i> 

<li><a hrefs"contact.html'»Contact«/a»«/l115 
</ul> 

<form method="get" action="/search"> 
<fieldset> 

<legend>Search</legend> 

<input type="text" name="terms" id="terms"> 


<input type="submit" value="Search"> 
</fieldset> 

</form> 

</div> 


你 可 以 对 3 样 东西 进行 定位 : 徽标 、 导 航 链接 和 搜索 框 。 

然而 ,你 可 能 不 想 对 它们 全 部 进行 定位 ,考虑 一 下 如 采 你 这 么 做 的 话 会 发 生 什 么 情况 : 页 头 
的 div 将 不 会 包含 任何 正常 文档 流 的 内 容 ， 因 而 不 会 有 高 度 ， 它 将 变 成 0 px 高 ， 也 可 能 变 成 一 行 
文本 的 高 度 , 这 取决 于 到 底 定 位 了 哪些 东西 以 及 浏览 需 是 如 何 处 理 剩 余 空 白 的 。 不 管 怎样 ,， 它 都 
AGE E. 

假设 未 定位 徽标 , 那么 你 就 可 以 随心 所 欲 地 放置 导航 链接 和 搜索 框 了 。 首 先 ,创建 一 个 包含 
ER ( Bllcontaining block， 是 定位 上 下 文 的 技术 术语 ) 作为 实现 的 基础 。 

.header (position: relative; } 

成 功 了 ! 这 为 任何 后 代 元 素 创 建 了 一 个 定位 的 上 下 文 。 因 此 ， 如 采 想 把 链接 放 到 右上 角 , Jp 
么 可 以 从 这 里 开始 : 
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nav" {position: absolute: top: 0; right: 0;} 
可 能 还 想 把 搜索 表单 放 在 右 下 角 ， 结 采 如 图 4-45 所 示 。 


.header form {position: absolute; bottom: 0; right: 0;} 


Home Products Buy! Contact 


de») 


图 4-45$ ”在 元 素 中 定位 其 他 元 素 


很 明显 这 里 还 需要 一 些 其 他 的 CSS ( 否则 导航 链接 就 古 一 个 项 目 符 号 列表 了 )， 不 过 你 已 经 


知道 了 。 多亏 了 定位 ,你 才 可 以 把 这 些 东 西 放 到 页 涉 中 的 任何 位 置 。 想 把 搜索 表单 放 到 上 面 并 把 
链接 放 到 下 面 吗 ? 那么 把 导航 链接 规则 中 的 top 改 成 bottom 即 可 , 在 form 规 则 中 反之 亦 然 , 结果 
如 图 4-46 所 示 。 


.nav (position: absolute; bottom: 0; right: 0;} 
.header form (position: absolute; top: 0; right: 0;} 


© Gm) 


Home Products Buy! Contact 


图 4-46 ”翻转 被 定位 元 杂 的 放置 位 置 


当然 ,你 需要 关注 一 下 重合 。 举 个 例 于 , 假设 导航 链接 变 成 了 两 行 或 者 三 行文 本 ,它们 或 许 
束 会 履 六 搜 索 框 了。 这 就 是 许多 布局 都 使 用 浮动 ， 而 不 用 定位 的 绿 故 ， 因 为 浮动 通常 不 会 导致 禾 
盖 。 尺 管 这 样 ， 也 要 谨慎 使 用 。 在 诸如 页 头 或 页 脚 这 样 的 区 域 中 使 用 定位 时 , 重新 安排 内 容 会 很 
容易 。 


4.17 将 元 素 推出 包含 块 


绝对 定位 的 一 个 有 趣 特 性 就 是 ， 可 以 把 元 系 定 位 在 包含 块 (定位 上 下 文 ) 之 外 。 这 可 比 你 想 
象 中 的 要 好 用 得 多 。 

例如 ， 你 可 以 证 结构 上 位 于 页 头 aiv 中 的 导航 链接 在 视觉 上 位 于 这 个 aiv 下 面 。 考 虑 下 面 的 
标记 结构 〈 细 节 详 见 前 面 一 闻 ): 

<div class="header"> 

<a href="/"><img src="logo.png" alt="ConHugeCo Inc."></a> 

«ul classs'nav'».,.,.«/ul» 


«form method="get" action="/search">...</form> 
</div> 
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此 外 , 应 用 下 面 的 样式 (为 了 更 清晰 ， 除 此 之 外 的 其 他 颜色 、 字 体 以 及 相关 的 样式 等 都 省 略 
T) 来 放置 导航 和 搜索 框 〈 见 图 4-47 ): 
.header {position: relative; margin-bottom: 1.5em;) 


Jnav {position: absolute; top: 100%; right: 0;} 
.header form {position: absolute; top: 0; right: 0;} 


Search — — — — — — — — — — 
— 


Home Products Buy! Contact 


图 4-47 ”将 链接 放置 在 页 头 之 外 


注意 ， 链 接 现 在 已 经 在 页 头 aiv 的 砍 边 之 下 了 。 为 了 给 链接 留 出 足够 的 空间 ， 防 止 它们 和 肥 
跟 在 页 头 之 后 的 内 容重 琶 ， 我 们 为 页 头 添 加 了 底部 外 边 距 。 这 样 就 可 以 使 搜索 框 〈 仍然 还 在 页 头 
P) 和 导航 不 那么 容易 相互 黎 闹 了 。 

你 可 能 认为 链接 离 页 头 有 点 儿 太 近 了 。 这 很 容易 修正 ， 只 需 增 加 top 值 。 不 过 ， 或 许 你 想 把 
链接 精确 地 放 到 页 涉 下 方 7 px 的 位 置 上 。 此 时 ， 你 可 以 给 页 头 定 义 确切 的 高 度 ， 然 后 计算 出 7 px 
折合 的 百分比 俩 移 量 ， 或 者 为 导航 简单 地 定义 一 个 7px 的 顶部 外 边 距 ， 效 果 如 图 4-48 所 示 。 


.nav {position: absolute; top: 100%; right: 0; 
margin-top: 7px; } 


Search 一 一 
— À 


Home Products Buy! Contact 


图 4-48 ”通过 顶部 外 边 中 把 链接 往 下 推 一 些 


基于 top 和 margin-top 具 有 不 同 布局 效 琳 的 事实 ,我 们 可 以 通过 它们 模拟 价 单 的 等 式 ， 即 导 
航 链 接 内 容 区 域 的 项 边 低 于 页 尖顶 边 100%+7 px 的 距离 ( 这 里 “100% 的 意思 是 “整个 页 头 的 高 度 ”)。 

男 一 个 把 信息 放 到 包含 块 之 外 的 有 趣 例子 就 是 , 把 博客 文章 的 日 期 时 间 等 信息 放 到 文章 的 一 
侧 。 考 虑 下 面 的 标记 结构 : 

«div class="entry"> 


<h2>Positioning in Context</h2> 


<hr> 

<ul class="datetime"> 
<li>Tuesday, 18 May 2010«/1li» 
<11i>15:26:37 -0400</1i> 

</ul> 

</div> 
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那么 现在 我 们 有 了 文章 的 入 口内 容 以 及 发 布 日 斯 和 时 间 信 息 。 我 们 还 可 以 在 那儿 放 更 多 的 信 
息 ， 比 如 文章 分 类 、 标 签 等 。 不 过 为 了 简单 起 见 ， 我 们 只 使 用 日 期 和 时 间 。 多 亏 有 了 绝对 定位 ， 
我 们 可 以 把 它们 沿 看 文 草 入 口 的 外 边 绿 任意 放置 。 

像 往常 一 样 ， 我 们 首先 创建 一 个 包含 块 ， 同 时 为 日 斯 和 时 间 信 息 打开 一 些 空间 : 


.entry {position: relative; margin-left: 10em; } 
然后 找到 ul 并 把 它 定位 在 文章 入 口 div 的 左 侧 边缘 之 外 ( 如 图 4-49 所 示 ): 


. datetime {position: absolute; width: 9em; left: -10em; top: 0; 
margin: 0; padding: 07r] 
. datetime li {list-style: none; font-style: italic; } 


bsg 18May Positioning in Context 


—— Following on my "*HTMLS vs. Flash" talk of a couple of weeks ago, l'm hoping to do a bit of blogging about HTML5, 


Flash, mobile apps, and more. But first | need to get some terminology straight. 


As | did in my talk, l'm going to refer to the collection of front-end web-standards technologies—(X)HTML (of any flavor), 
CSS, and JavaScript—as "the web stack". l've seen the term used here and there and it makes the most sense to me 
as a condensed verbal shorthand. It beats writing out the specific technologies every time or trying to use similarly 
clumsy constructions like “front-end tech". If you like, think of “web stack" as a rough equivalent to “Ajax"—a term that 
was invented because continually saying "asynchronous JavaScript + CSS + DOM + XMLHttpRequest" was 
unworkable. 


The web stack sort of includes downloadable fonts, but only in the same sense that images or any other external 
resource is part of the stack. Similarly, it encompasses frameworks like jQuery in the sense that they're built out of the 
components of the web stack. 


When | use the term "web stack", though, I'm not referring to back-end technologies. Those things are important, 
certainly, but not from the front-end point of view. A browser doesn't care if your page was generated by PHP, Django, 
Rails, Perl, or what have you. It doesn't even care if the server runs on Apache or something else. 


Furthermore, it doesn't refer to plugins. Yes, that means Flash, but it also means QuickTime, Real, ActiveX, and so 
forth. What | need to make clear is that I'm not doing this in an attempt to imply that plugins don't belong on the web at 
all. They're just not part of that core web stack any more than the web stack is part of them. That doesn't stop them 
working together, obviously. 


Okay, so that's out of the way, and | hope my meaning is sufficiently clear to everyone. Please do leave a comment if it 
isn't. Onward! 


图 4-49 ”将 文章 入 口 的 元 数据 放 在 一 侧 


width 是 用 来 防止 元 数据 内 容 的 右边 绿 距 离 真 正文 章 和 口内 容 的 左边 绿 太 近 。 就 像 这 样 ， 我 
们 已 经 把 日 期 和 时 间 放 到 左 侧 的 外 面 了 了 。 当 然 ， 将 它们 翻转 到 右 侧 也 一 样 傈 单 ( 如 图 4-50 所 示 ): 


.entry (position: relative; margin-right: 10em;} 
. datetime (position: absolute; width: 9em; right: -10em; top: 0; 
margin: 0; padding: 0;} 


ASA TEM, FMA VCR BOE ET DEL. EPA, BEE. 
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Positioning in Context ra 18 May 


Following on my "HTMLS vs. Flash" talk of a couple of weeks ago, l'm hoping to do a bit of blogging about HTML5, TESORO 


Flash, mobile apps, and more. But first | need to get some terminology straight. 


As | did in my talk, l'm going to refer to the collection of front-end web-standards technologies—{X)HTML (of any flavor), 
CSS, and JavaScript—as “the web stack”. I've seen the term used here and there and it makes the most sense to me 
as a condensed verbal shorthand. It beats writing out the specific technologies every time or trying to use similarly 
clumsy constructions like “front-end tech”. If you like, think of “web stack” as a rough equivalent to “Ajax"—a term that 
was invented because continually saying “asynchronous JavaScript + CSS + DOM + XMLHttpRequest" was 
unworkable. 


The web stack sort of includes downloadable fonts, but only in the same sense that images or any other external 
resource is part of the stack. Slmilarly, it encompasses frameworks like jQuery in the sense that they're built out of the 
components of the web stack. 


When | use the term "web stack", though, l'm not referring to back-end technologies. Those things are important, 
certainly, but not from the front-end point of view. A browser doesn't care if your page was generated by PHP, Django, 
Rails, Perl, or what have you. It doesn't even care if the server runs on Apache or something else. 


Furthermore, it doesn't refer to plugins. Yes, that means Flash, but it also means QuickTime, Real, ActiveX, and so 
forth. What | need to make clear is that l'm not doing this in an attempt to imply that plugins don't belong on the web at 
all. They're just not part of that core web stack any more than the web stack is part of them. That doesn't stop them 
working together, obviously. 


Okay, so that's out of the way, and | hope my meaning is sufficiently clear to everyone. Please do leave a comment if it 
isn't. Onward! 


图 4-50 ”将 元 数据 从 左 侧 移 到 右 侧 
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还 记得 框架 (frame, WIRE "pp ) m? 你 可 以 把 一 个 导航 条 或 者 页 脚 放 到 浏览 器 窗口 的 顶 
部 或 者 底部 , 并且 使 它 永 远 都 不 会 移动 。 尽 管 过 去 很 多 时 候 它 都 没有 被 正确 使 用 , 但 是 它 的 核心 
思想 还 是 好 的 。 事实 上 ,你 可 以 通过 CSS 重 现 框架 ， 并且 实 现 跟 框架 类 似 的 功能 ， 而 不 用 真正 地 
创建 框架 ， 其 关键 就 在 于 固定 定位 (fixed positioning )。 

例如 ， 假 设 硕 望 当 页 面 内 容 滚 动 时 ， 页 头 始终 保持 在 屏幕 的 顶部 〈 如 图 4-51 所 示 )， 那 么 很 
简单 : 

.header {position: fixed; top: 0; left: 0; width: 100%; z-index: 1;} 

这 会 把 页 头 “ 钉 ”在 浏览 器 窗口 的 顶部 ， 而 且 由 于 指定 了 明确 的 z-indqex 值 ， 因 而 会 保证 页 
头 位 于 任何 非 定位 的 内 容 上 方 。( 如 果 没 有 z-indaex 的 话 ， 定 位 元 素 是 否 覆 盖 其 他 内 容 或 者 被 其 
他 内 容 履 盖 都 取决 于 它们 在 文档 源 代 码 中 的 顺序 。) 用 专业 的 术语 来 说 ， 浏 览 喜 窗口 是 页 头 的 包 
含 块 。 现 在 ， 无 论 你 如 何 滚动 页 面 ， 页 头 都 不 会 移动 。 

如 果 就 这 样 把 它 放 在 那儿 的 话 ， 很 可 能 会 遇 到 问题 : 页 面 顶部 的 内 容 将 始终 在 页 头 的 下 面 ， 
任何 人 都 没 办 法 读 到 这 些 内 容 。 那 么 ， 知 想 使 它 可 见 ， 你 需要 把 页 面 的 内 容 加 下 挪 一 些 。 

有 一 个 解决 办 法 就 是 ， 用 至 少 等 于 页 头 高 度 的 内 边 距 来 填补 页 面 的 顶部 (如 图 4-52 所 示 ): 


body {padding-top: 100px; } 


obscureness! Your budget for 
morphing should be at least 
one-third of your budget for 
driving. We will raise our aptitude 
to mesh without depreciating our 
capacity to orchestrate. Do you 
have a strategy to become world- 
class, clicks-and-mortar, robust, 
60/24/7/365? Without 
functionalities, you will lack 
implementation. What does it 
really mean to synergize 
"strategically"? We will cultivate 
the capacity of web services to 
reinvent. It sounds puzzling, but 
it's accurate! 


ConHugeCo has permanently 
altered the theory of branding. 
What do we e-enable? Anything 
and everything, regardless of 
obscureness! Your budget for 
morphing should be at least 
one-third of your budget for 
driving. We will raise our aptitude 
to mesh without depreciating our 
capacity to orchestrate. Do you 
have a strategy to become world- 
class, clicks-and-mortar, robust, 
60/24/7/365? Without 
functionalities, you will lack 
implementation. What does it 


really mean to synergize 
"strategically"? We will cultivate 
the capacity of web services to 
reinvent. It sounds puzzling, but 
it's accurate! 


图 4-52 KERNA PHEA rfr] e t DE HY US 


Our technology takes the best features of IIS and 
Python. The reporting factor is 1000/60/60/24 
71365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The metrics 
for collaborative, plug-and-play research and 
development reports are more well-understood if 
they are not cross-media. Is it more important for 
something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 
of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes the 
best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing are 
more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have to 
e-enable intuitively. 


The systems factor can be summed up in one word: 
clicks-and-mortar. 


ConHugeCo has perma the theory of 
i q Wh J e eria yid ang 


图 4-51 固定 的 页 头 


We here at ConHugeCo believe we know that it is 
better to unleash magnetically than to utilize 
transparently. Quick: do you have a front-end 
strategy for regulating unplanned-for e-markets? 
Our technology takes the best features of IIS and 
Python. The reporting factor is 1000/60/60/24 
71365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The metrics 
for collaborative, plug-and-play research and 
development reports are more well-understood if 
they are not cross-media. Is it more important for 
something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 
of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes the 
best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing are 
more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have to 
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这 里 还 有 为 外 一 个 潜在 的 问题 , RIHSE F ER EA EE A ET RE SL i A 
口 高 度 相 等 的 距离 ， 而 不 会 把 固定 的 页 头 计算 在 内 。 因 此 ， 那 些 使 用 上 翻 页 /下 翻 页 的 用 户 很 可 
能 在 每 次 翻 页 时 都 会 错过 几 行 内 容 。 

没有 什么 简单 的 命令 可 以 告诉 浏览 带 “ 少 跳 过 一 些 ”。 相 反 ， 你 必须 重新 定义 内 容 出 现 的 徐 
O ( 如 图 4-53 所 示 )， 这 意味 看 要 对 包 合 页 面 中 其 他 内 容 的 aiv 应 用 固定 定位 。 为 此 ， 你 需要 放 径 
body 上 的 内 边 距 并 进行 类 似 下 面 的 操作 : 


.Contain {position: fixed; top: 100px; bottom: 0; width: 100%;} 


ConHugeCo has permanently 
altered the theory of branding. 
What do we e-enable? Anything 
and everything, regardless of 
obscureness! Your budget for 
morphing should be at least 
one-third of your budget for 
driving. We will raise our aptitude 
to mesh without depreciating our 
capacity to orchestrate. Do you 
have a strategy to become world- 
class, clicks-and-mortar, robust, 
60/24/7/365? Without 
functionalities, you will lack 
implementation. What does it 
really mean to synergize 
“strategically"? We will cultivate 
the capacity of web services to 
reinvent. It sounds puzzling, but 
it's accurate! 


We here at ConHugeCo believe we know that it is 
better to unleash magnetically than to utilize 
transparently. Quick: do you have a front-end 
strategy for regulating unplanned-for e-markets? 
Our technology takes the best features of IIS and 
Python. The reporting factor is 1000/60/60/24 
7/365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for 
enhancing should be at least three times your 
budget for growing. What does the term "customer- 
defined, B2B" really mean? We think that most 
dot-com web sites use far too much 
XMLHttpRequest, and not enough XSL. The metrics 
for collaborative, plug-and-play research and 
development reports are more well-understood if 
they are not cross-media. Is it more important for 
something to be synergistic or to be six-sigma? 
Imagine a combination of J++ and HTML. Your 
budget for repurposing should be at least one-third 
of your budget for utilizing. 


If all of this comes off as unimagined to you, that's 
because it is! 


ConHugeCo has revolutionized the abstraction of 
solutions. We will mesh the aptitude of metrics to 
seize. Without adequate interfaces, solutions are 
forced to become C2C2C. Our technology takes the 
best aspects of FOAF and Python. Think cyber- 
interactive. Our functionality is unparalleled in the 
industry, but our robust web services and 
non-complex use is constantly considered an 
amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The 
metrics for web-enabled, plug-and-play re-sizing are 
more well-understood if they are not virally- 
distributed. Do you have a game plan to become 
user-centric? If you seize vertically, you may have to 


Lorem ipsum 
Dolor sit 
Amet consectetuer 


Adipiscing elit 


Sed diam 
Nonummy nibh 
Euismod tincidunt 
Ut laoreet 

Dolore magna 


Aliquam erat 


对 页 头 和 主要 内 容 同时 使 用 固定 定位 

IACTA ROCA: VASE KG A RE PIE. 而 上 翻 页 和 下 翻 页 也 和 预期 的 表现 一 致 。 这 也 同时 
意味 痢 内 容 的 滚动 条 可 能 在 浏览 硕 窗 口中 ,你 仅 的 ， 就 像框 淋 那 样 。 正 如 许多 布局 技术 一 样 ， 它 
ARARE, mA CRAM, KERE., 


图 4-53 
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当然 ， 能 改变 颜色 和 字体 已 经 很 好 了 , HINARI EP. IBY, EUR ILE 
式 的 、 令 人 有 眼 花红 乱 的 效果 。 把 这 些 东西 都 混在 一 起 称 作 “ 歼 果 ” 可 能 有 点 儿 过 于 宽泛 ,但 这 里 
涉及 的 范围 确实 太 广 , 没有 其 他 办 法 了 。 本 章 你 将 会 看 到 如 何 制作 圆 角 、 打 破 元 素 框 、 伪 造 扭 曲 
滤 锐 、 滑 动 图 片 到 标签 、 创 建 视差 以 及 更 多 精彩 内 容 。 


5.1 复杂 的 螺旋 


我 个 人 感 党 ， 它 虽然 很 老 但 却 很 有 价值 。 这 个 例子 称 作 “复杂 螺旋 演示 ”， 因 为 我 在 2001 年 
创建 它 时 就 是 这 么 叫 它 的 。 尽 管 它 的 应 用 场景 已 经 被 半 透 明 的 PNG 和 RGBa 闫 色 侵 蚀 殊 尽 ， 不 过 
在 这 个 老式 “ 战 答 ” 中 仍然 有 可 以 挖掘 的 价值 。 

要 想 使 它 能 够 工作 ,最少 需 要 两 张 背 景 图片 ( 如 图 5-1 所 示 )。 


图 5-1 和 欲 使 用 的 两 张 图 片 
然后 你 就 可 以 把 其 中 一 个 作为 主体 的 背景 ， 而 把 另外 一 个 作为 包含 了 页 面 大 部 分 内 容 的 div 
的 育 景 了 《如 图 $-2 所 示 )。 下 面 是 相关 的 CSS 以 及 HTML 的 骨 以 : 


body (background: white url(shell.jpg) top left no-repeat fixed; } 
divimain {background: white url(shell-rippled.jpg) top left no-repeat fixed; } 
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<body> 
<div id="main"> 
(...content...) 
</div> 
</body> 


complexspiral distorted 


xists to show off what can be accomplished with pure CSS1, and that's all. 
use any CSS2 to accomplish its magic. Remember: as you look this 
are any PNGs being used, nor do | employ any proprietary 
t's ; all done using straight W3C-recommended markup and styling, all 


page and back: Notice how the various areas with colored backgrounds also appear to distort the background 
image as if through mottled glass. Try changing the text size and notice how the compositing effect remains 
consistent. Then make your browser window really narrow and scroll horizontally. Again, everything should 
remain seamless and consistent. 


The demonstrated effect, that of sir. various elements backed with translucent "ppa que of m hues, 


图 $-2 最终 效果 ( 男 见 彩 插 图 5-2 ) 


这 里 的 关键 就 是 关键 字 fixed， 在 两 条 规则 中 ， 它 都 会 确保 背景 图 像 的 左上 角 位 于 视 口 (在 
这 种 情况 下 即 浏览 需 窗 口 ) 的 左上 角 , 并 有 旦 固定 在 那个 位 置 。 即 使 在 文档 深 动 时 ， 两 个 图 片 也 不 
会 移动 。 因 此 ， 它 们 “位 于 彼此 之 上 ”。 

想 知道 这 是 什么 意思 的 话 , 考虑 一 个 更 简单 的 例子 , 其 中 把 两 个 不 同 尺 寸 的 痛 景 图 像 回 定 在 
视 口 的 左上 角 ( 如 图 5-3 所 示 ): 


html, body {background: transparent top left no-repeat fixed; } 
html {background-image: url (red-box.gif);} 
body {background-image: url (green-box.gif);} 


注意 两 个 图 像 在 窗口 的 左上 角 是 如 何 放置 的 , 尽管 页 面 已 经 向 内 容 的 底部 滚动 了 很 大 一 部 分 
距离 ,但 两 个 图 像 都 没有 移动 。 青 一 次 说 明 ， 它 们 是 相对 于 视 口 固 定 的 。 毫 不 奔 张 地 说 ， 它 们 永 
元 也 不 会 移动 。 


rough mottled glass. Try nd 
en make your browser window 
less and consistent. 


ated effect, that of having vario 
ble using fixed-attachment backg 
think it's even possible with IE's 


enough devise one that isn't. 


| missed the original complex 


Glad you asked. The effect demonstrated he 
For example, the main-content area (the blue 
background: 


图 $-3 ”展示 固定 在 视 口 中 的 两 个 图 像 (为 见 彩 择 图 5-3 ) 


这 就 是 复杂 螺旋 演示 ,， 它 使 用 两 个 同样 大 小 的 图 像 , 使 网 像 的 内 容 并 肩 排列 ， 并 把 两 个 网 像 
Moe am, Bit n] LUE SIER — 4 4s ae FE SP E Tft , "I oc tS PER BC i EC (C. 
AMEA EI RAC A SCTE EEN divif, body A se pem dX Iso EB ENB. XX 
个 aiv 的 背景 图 像 并 没有 跟 它 目 身 的 左上 角 对 齐 ， 而 是 跟 视 口 的 左上 角 对 齐 。 如 图 5$-4 所 示 ， 你 只 
看 到 了 图 像 与 aiv 本 身 相 交 的 部 分 。 


jll the ige vertically. Make sure you scroll all the way to the very end of the 
as with colored backgrounds also appear to distort the background 
iging the text size and notice how the compositing effect remains 
w really narrow and scroll horizontally. Again, everything should 


us elements backed with translucent rippled glass of varying hues, 
rounds in CSS. (Okay, maybe it could be done in Flash; | don't 


IE's proprietary filters, but even if this effect is possible with filters, | 


md: white url(glassy-ripple.jpg) 0 0 no-repeat fixed;) 
The above } is ; equivalent to these styles: 


div#content { 
background-color: white; 
background-image: url(glassy-ripple. jpg); 
background-position: 0 
ES no-repeat 


图 5-4 JREAN DUR IN FAC AY 2 6 AR 
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现在 ， 假 设 你 想 为 内 容 中 的 标题 创建 第 三 个 扭曲 的 效果 ， 那 么 再 加 一 个 图 像 即 可 ， 如 图 5-5 
Biz e 


图 5-5 ”和 欲 添加 的 第 三 个 图 像 
现在 只 需 像 这 样 添 加 此 图 像 ( 如 图 5-6 所 示 )， 标 题 就 会 有 自己 的 效果 了 。 


divimain h2 (background: url(shell-traced.jpg) top left no-repeat; } 


图 $-6 ”添加 第 三 个 图 像 后 的 效果 
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这 个 效果 也 不 仅 限 于 使 用 不 重复 的 背景 ， 你 可 以 简单 地 分 层 放置 重复 的 图 案 ， 就 像 图 $-7 中 
展示 的 那样 。 


complexspiral distorted 


The page you are viewing right now exists to show off what can be accomplished with pure CSS1, and that's all. 
This variant on complexspiral doesn't even use any CSS2 to accomplish its magic. Remember: as you look this 
demo over, there is no Javascript here, nor are any PNGs being used, nor do | employ any proprietary 
extensions to CSS or any other language. It's all done using straight W3C-recommended markup and styling, all 
validated, plus a total of four (4) images. 


Unfortunately, not every browser supports all of CSS1, and only those browsers which fully and completely 
support CSS1 will get this right. Despite some claims to the contrary, IE6/Win's rendering of this page is not 
correct, as it (as well as some other browsers) doesn't correctly support background-attachment: fixed for 
any element other than the body. That makes it impossible to pull off the intended effect. Other browsers may or 
may not get the effect right. 


Hands-on: Things to Examine 


Before you start, make sure you're viewing this page in one of the browsers mentioned above. Otherwise the 
descriptions to follow won't match what you see. 


The first, easiest thing to do is scroll the page vertically. Make sure you scroll all the way to the very end of the 
page and back. Notice how the various areas with colored backgrounds also appear to distort the background 
image as if through mottled glass. Try changing the text size and notice how the compositing effect remains 
consistent. Then make your browser window really narrow and scroll horizontally. Again, everything should 
remain seamless and consistent. 


The demonstrated effect, that of having various elements backed with translucent rippled glass of varying hues, 
is only possible using fixed-attachment backgrounds in CSS. (Okay, maybe it could be done in Flash; | don't 


图 5-7 使 用 对 齐 的 图 案 


WIE, 或许 没 有 这 么 多 图 宁 ， 不 过 相信 你 已 经 惜 我 的 意思 了 。 

顺便 说 一 下 ， 原始 的 复杂 螺旋 演示 使 用 的 是 同一 图 像 的 颜色 遮盖 版 本 ,目的 是 创建 半 透 明 青 
景 的 效果 。 迁 想 2001 年 , 那 是 一 种 很 艺术 的 状态 : 很 少 有 浏览 器 文 持 alpha 通 道 的 PNG 图 像 ， 而 且 
全 都 不 文 持 像 RGBa 那 样 的 alpha 通 道 的 颜色 。 随 肴 对 PNG 完 整 文 持 的 普及 ， 那 种 形式 的 演示 已 经 
过 时 了 (你 仍然 可 以 在 http://meyerweb.com/eric/css/edge/complexspiral/demo.html 看 到 )。 然 而 ,本 
节 展 示 的 “扭曲 的 ”版 本 仍 具有 现实 音义 ， 只 是 没有 其 他 办 法 做 出 同样 的 效果 了 。 


5.2 CSS 弹出 框 


如 果 你 有 足够 的 想象 力 ， 这 里 有 个 效果 可 以 实现 弹出 式 菜单 〈 详 见 5.3 节 )。 作 为 最 简单 的 应 

， 你 可 以 使 用 这 种 效果 让 信息 在 鼠标 其 停 时 显示 、 在 鼠标 移出 时 隐藏 ， 而 不 需要 写 一 点 儿 
J avas cript. 

假设 你 想 为 侧 边栏 中 的 每 个 链接 都 展示 一 些 提 示 文 本 ,但 不 想 利 用 工具 提示 (tooltips ) 完成 
这 一 任务 〈 因 为 工具 提示 在 不 同 的 浏览 硕 中 表现 不 一 致 ， 而 且 至 今 还 不 能 对 它 应 用 样式 )。 那 么 
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你 会 设置 类 似 下 面 的 标记 : 


<ul class="toc"> 

<li><a href="1.html">Chapter 1 <i>In which a dragon is seen</i></a></li> 

<li><a href="2.html">Chapter 2 «i»In which a knight is summoned</i></a></1li> 
<li><a href="3.html">Chapter 3 <i>In which a princess is disappointed</i></a></1li> 
</ul> 


等 等 ,i? 那 不 是 表现 型 的 标记 吗 ? 好 吧 , 确实 是 , 而 且 这 正 是 你 要 做 的 。 你 也 可 以 使 用 span， 
不 过 :作为 元 系 名 字 来 说 更 短 一 些 ， 而 且 除 此 之 外 ， 如 果 CSS 由 于 某 种 原因 没有 起 作用 ， 那 么 文 
本 很 可 能 会 变 成 斜体 。 在 我 看 来 ， 这 是 个 可 以 接受 的 回 退 。 

注意， 我 们 要 的 是 弹出 框 。 你 需要 做 的 就 是 首先 抑制 i 元 系 的 显示 ， 然 后 当 它 们 每 一 个 的 父 
TTR (RLA ) 被 其 停 时 ， 将 它们 分 别 显示 出 来 ， 如 图 5-8 所 示 。 


ul.toc li {position: relative: } 


ul.toc li a i {display: none, } 

ul.toc li a:hover i (display: block; width: 6em; 
position: absolute; top: 0; left: 100%; 

margin: -lem 0 0 lem; padding: lem; 

background: #CDE; border: 1px solid gray; } 


Chapter 1 
Chapter 2 


Chapter 3 In which a 


princess ts 
Chapter 4 disappointed 


Chapter 5 
Chapter 6 
Chapter 7 


图 5-8 PRA HER AY ST SCAN 


小 弹出 框 设 好 了 。 它们 是 相对 于 包含 它们 的 列表 项 (11 ) 元 系 进 行 定 位 的 ， 因为 在 上 面 展示 
的 CSS 中 第 一 行为 position: relative。 如 采 你 想 让 它们 相对 于 整个 链接 集合 定位 的 话 ， 只 需 
要 把 相对 定位 应 用 到 无 序列 表 (ul ) 本 号， 然后 相应 地 调整 弹出 和 框 的 放置 位 置 。 例 如 ， 你 可 以 把 
它们 放 到 列表 中 最 后 一 个 链接 的 下 面 ， 如 图 5-9 所 示 。 


ul.toc {position: relative;} 


ul.toc li a i {display: none;} 

ul.toc li a:hover i (display: block; width: 6em; 
position: absolute; top: 100%; right: 0; 

margin: lem 0 0; padding: 1em; 

background: #CDE; border: 1px solid gray; } 


这 种 技术 可 以 上 升 为 实现 多 级 舱 套 的 沫 单 ， 这 正 是 下 一 节 的 内 容 。 


Chapter 1 
Chapter 2 
Chapter 3 
Chapter 4 
Chapter 5 


Chapter 6 


Chapter 7 


In which a 
princess ts 
disappointed 


图 5-9 ”链接 下 方 的 弹出 框 及 文本 


5.3 CSS 菜单 


如 果 你 喜欢 的 话 ， 可 以 用 CSS 弹 出 框 的 原理 实现 多 级 垦 套 的 弹出 菜单 。( 我 一 般 不 这 么 做 ， 
因为 受 不 了 弹出 菜单 。 不 过 我 也 同样 受 不 了 巧克力 、 咖 啡 、 碳酸 以 及 几乎 任何 形式 的 酒精 ， 所 以 
我 知道 个 啥 呢 ? ) 这 种 特别 的 技术 有 一 个 很 大 的 价值 就 是 , 它 可 以 回 你 展示 悬 停 效 果 的 应 用 绝 不 
仅 限 于 超 链 接 。 

这 里 是 基本 的 设置 (为 了 简单 起 见 ， 使 用 了 非常 简短 的 URL， 效 果 如 图 $-10 所 示 ): 


<ul class="menu"> 

<li class="sub"><a href="/s1/">Section 1</a> 
<ul> 

<li><a href="/s1/ss1/">Subsection 1</a></li> 
<li><a href="/s1/ss2/">Subsection 2</a></li> 
<li><a href="/s1/ss3/">Subsection 3</a></li> 


</ul> 
</li> 
<li class="sub"><a href="/s2/">Section 2</a> 
<ul> 


<li><a href="/s2/ss1/">Subsection 1</a></li> 
<li><a href="/s2/ss2/">Subsection 2</a></li> 
</ul> 
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Section 1 


Subsection 1 
Subsection 2 
Subsection 3 

Section 2 


Section 3 

Section 4 
Subsection 1 
Subsection 2 
Subsection 3 

Section 5 


图 $-10 未 隐藏 的 子 菜单 
迄今 为 止 ， 一 切 正 常 ! 现在 开始 隐藏 子 荣 单 : 


li.sub ul {display: none; } 

PET Yo MEA. Ub BE PSSA wA (看 上 去 最 不 令 人 满意 ) 的 实现 方法 
Lie FA A : 

li.sub:hover > ul {display: block; } 

xx HAT SOR IN ICE Ea, vite e as AES PO. PATI, Ars ES 
些 定位 样式 , 就 可 以 使 它们 挨 着 父 元 素 弹 出 了 ( 如 图 5-11 所 示 ), 并 且 不 会 改变 文档 其 余部 分 的 布局 。 


li.sub {position: relative;} 
Ii.sub:hover > ul {display: block; position: absolute; top: 0; left: 100%; 
margin: 0; background: white; } 


Subsection 1 


Subsection 2 


图 5-11 弹出 菜单 
FKE, 这 可 以 实现 任意 级 别 的 散人 套 菜 单 。 如 果 你 愿意 的 话 , 即使 17 层 次 的 能 套 菜 单 也 可 以 。 


尽管 你 很 可 能 会 为 有 这 种 想法 感到 羞愧 ， 不 过 尽 可 以 不 顾 一 切 地 去 实现 它 。 

从 菜单 的 放置 位 置 来 说 ,你 可 以 尽情 地 在 页 面 的 平面 空间 发 挥 想 象 。 你 可 以 把 顶级 菜单 人 口 
沿 着 页 面 的 顶部 放置 ， 而 把 第 一 级 子 菜单 放 在 它们 下 方 ， 如 图 5-12 所 示 。 第 二 级 以 及 更 深层 的 菜 
单 可 以 在 侧 边 弹 出 。 这 只 不 过 是 需要 编写 必要 的 CSS， 大 致 会 像 这 样 


ul.menu > li (display: inline; position: relative; } 


ul.menu ul {display: none; } 

ul.menu li.sub:hover > ul (display: block; position: absolute; white-space: nowrap; } 
ul.menu > li.sub:hover > ul (top: 100%; left: 0;} 

ul.menu ul li.sub:hover > ul (top: 0; left: 100%;} 


Section 1 Section 2 Section 3 Section 4 Section 5 


Subsection 1 | 
Subsection 2 
Subsection 3 


图 5-12 PASE 
这 样 的 话 ， 就 只 有 顶级 的 菜单 是 下 拉 的 ， 而 其 余 的 会 在 它们 父 元 素 的 右 侧 出 现 。 


5.4 FET] 


有 时 候 你 可 能 希望 弄 点 儿 不 规则 的 东西 ,这 可 以 通过 框 冲 切 (boxpunch ) ARRAMA, E 
是 一 种 可 以 在 视觉 上 将 元 系 框 的 一 部 分 移 除 的 技术。 它 仅 在 单 色 或 固定 图 像 痛 景 上 起 作用 , 不 过 
给 入 们 留 下 了 不 少 想象 空间 。 

框 冲 切 的 最 简单 形式 就 是 把 一 个 框 放 在 为 一 个 框 的 角落 里 ( 如 图 5-13 所 示 )， 并 确保 它 的 育 
景 与 周围 的 内 容 一 致 ， 而 不 是 与 它 的 父 元 系 一 致 。 

body {background: #COFFEE; } 

div.main (background: #BAD; } 


.punch {background: #COFFEE; font-size: 500%; 
float: left; margin: 0 0.1em 0.1em 0; padding: 0.1em;} 


<div class="main"> 

«hl class="punch">Hi.</h1> 
(content...) 

</div> 


图 5-13 ”应 用 了 框 冲 切 的 欢迎 词 ( 男 见 彩 插图 5-13 ) 
如 果 你 想 让 它 更 复杂 一 些 , 可 以 为 冲 切 的 部 分 设置 背景 ， 并 使 用 一 个 漂亮 的 粗 边框 将 它 和 框 
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的 其 余部 分 隔 开 〈 如 图 $-14 所 示 ): 


body {background: #COFFEE; } 

div.main (background: #BAD; } 

.punch {background: #987; font-size: 500%; 

float: left; margin: 0 0.1em 0.1em 0; padding: 0.lem; 
border: 0.2em solid #COFFEE; border-width: 0 0.2em 0.2em 0;} 


图 $-14 ”使 用 边框 冲 切 欢迎 词 


只 要 主 框 没有 边框 ， 就 一 切 都 没有 问题 。 如 图 5-15 所 示 ， 添 加 边框 的 那 一 刻 ， 它 就 会 环绕 冲 
切 的 元 素 ， 看 上 去 就 不 那么 有 冲击 力 了 。 


body {background: #COFFEE; } 

div.main (background: #BAD; border: 3px solid black; } 
.punch {background: #COFFEE; font-size: 500%; 

float: left; margin: 0 0.1em 0.1em 0; padding: 0.1em;) 


[Kk5-15 ” 当 容 需 有 边框 时 会 发 生 什 么 


没关系 , 你 可 以 搞定 它 。 只 需要 给 冲 切 的 部 分 加 两 个 边框 , 再 加 上 一 点 儿 人 负 外 边 距 ( 如 网 5-16 
TAN ): 
.punch {background: #COFFEE; font-size: 500%; 


float: left; margin: -3px 0.1em 0.1lem -3px; padding: 0.1em; 
border: 3px solid black; border-width: 0 3px 3px 0;} 


图 5-16 ”将 冲 切 部 分 取出 并 通过 边框 将 其 整合 


由 于 有 了 项 部 和 左 侧 的 外 边 距 , 冲 切 的 框 实际 上 被 往外 拉 出 了 一 些 , 以 确保 它 可 以 覆盖 主 aiv 
的 边框 。 设置 与 主 div 的 边框 相对 应 的 右 侧 和 底部 的 边框 ,可 以 给 人 一 种 不 规则 框 的 错觉 。 因 此， 
这 个 框 又 一 次 被 冲 切 开 了 |! 

当然 ， 你 不 止 可 以 把 它 放 在 角落 里 ， 比 如 这 里 就 有 处 理 块 引 用 所 使 用 的 CSS (在 图 5-17 中 也 
有 展示 ): 


blockquote {font-size: 150%; font-weight: bold; background: #COFFEE; 
float: right; width: 40%; 

padding: 0.25em 5$; margin-right: -3px; 

border: 3px solid black; border-right: 0;} 


图 5-17 应 用 了 框 冲 切 的 块 引 用 
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5.5 CSS3 预备 圆 角 


结合 使 用 框 冲 切 和 CSS 精 灵 (CSS sprite ， 也 称 CSS 精 灵 ， 将 在 本 章 后 续 部 分 讨论 )， 可 以 用 
1 个 图 像 和 4 个 额外 的 元 素来 实现 圆 角 效果 。 它 的 优点 是 可 以 跨 浏览 器 兼容 ， 只 有 在 像 IE6 和 Safari 
2 这 样 的 老式 浏览 器 中 才 会 有 点 儿 问 题 。 缺 点 是 需要 额外 的 元 素 和 图 像 。 

图 5$-18 展 示 了 最 终 效果 。 


Every truth has four corners: as a 
teacher I give you one corner, and it is 


for you to find the other three. 
—Confucius 


图 $-18 ”目标 效果 
确保 元 率 可 以 被 圆 角 化 的 第 一 步 就 是 先 把 它 标记 成 下 面 这 样 , 然后 保证 它 已 经 包含 了 创建 圆 
角 所 需 的 全 部 标记 。 


<div class="rounded"> 
(..content...) 


c tl"></b> 
<b class="c tr"></b> 
<b class="c bl"></b> 

c br"></b> 


<b class=" 


<b class=" 
</div> 


是 的 ， 那 确实 是 pb 元素 。 这 个 例子 中 使 用 了 表现 型 的 元 素 ， 因 为 这 些 元 素 的 全 部 目的 就 是 创 
建 一 个 表现 型 的 效果 ,你 也 可 以 很 容易 地 把 这 些 地 方 换 成 giv 或 span 元 素 , 不 过 真 的 没什么 必要 。 
LZE, 而 且 在 充当 结构 性 的 标记 :“ 放 在 这 儿 只 是 为 了 美观 。”( 当然, 在 诸如 下 一 市 所 描述 
的 那 种 理想 世界 里 ， 是 根本 不 需要 任何 额外 元 素 的 。) 

类 名 rounded 可 以 应 用 在 任何 想 拥有 病 角 效果 的 元 杂 上 , 它 将 被 用 来 对 元 素 应 用 一 些 必要 的 
CSS。 每 个 b 元 系 都 有 两 个 类 名 ， 它 们 共同 圣 有 一 个 类 名 c， 即 “ 角 ”( corner ) 的 简称 。 紧 随 其 后 
的 是 由 两 个 字母 指定 的 ， 关 于 该 元 素 会 被 用 来 创建 哪个 角 的 类 名 : t1" 代 表 左 上 角 、tr 代 表 右 上 
fa. BRAA T SESS 

现在 处 理 CSS， 首 先 把 它们 设置 好 ， 这 样 才能 看 到 你 在 做 什么 : 

b.c (background: red;) /* 临时 的 背景 */ 

这 会 很 好 地 把 圆 角 文 架 的 轮廓 圈 出 来 ， 现 在 把 它们 放 到 正确 的 位 置 上 〈 如 图 $-19 所 示 ): 


b.c (background: red;) /* 临时 的 背景 */ 
.rounded (position: relative; border: 2px solid black; background: white; } 
b.c {position: absolute; height: 20px; width: 20px;} 


(D tl Atop left 的 首 字 母 ， 按 照 中 文 习 惯 将 其 译 为 “左上 角 "， 下 同 。 
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beth {top: 0; left: 0;} 
b.tr {top: 0; right: 0;} 
b.bl {bottom: 0; left: 0;} 
b.br {bottom: 0; right: 0;} 


Every truth has four corners: as a 
teacher I give you one corner, and it is 


for you to find the other three. 
—Confucius 


图 $-19 ”把 b 元 素 放 到 四 角 


正如 你 所 看 到 的 ， 每 一 个 都 在 它们 各 目的 位 置 上 ,并且 生成 了 一 个 20px x 20px 的 小 框 。 这 时 
已 经 可 以 看 出 一 个 问题 了 : 它们 分 别 位 于 各 目的 角 沙 里 ， 而 红色 的 背景 应 该 缆 关 aiv 的 边框 ， 如 
图 5-20 所 示 。 因 此 : 


b.tl (top: 0; left: 0; margin: -2px 0 0 -2px;} 
b.tr {top: 0; right: 0; margin: -2px -2px 0 0;} 
b.bl (bottom: 0; left: 0; margin: 0 0 -2px -2px; } 
b.br {bottoms 0; right: 0; margin: 0 -2px -2px 0-7} 


图 $-20 ”新 的 放置 位 置 〈 特 写 ) 


这 会 把 每 个 p 元 素 向 外 拉 一 些 ， 刚 好 使 它们 可 以 盖 住 aiv 的 边框 。 当 然 ， 如 果 qiv 有 更 粗 的 边 
框 ， 那 么 你 应 该 相应 地 把 pb 元 素 向 外 拉 出 相应 的 距离 。 

现在 你 需要 的 就 是 一 个 可 以 填充 各 个 角 的 图 像 了 。 我 的 确 指 的 是 图 像 ， 而 且 只 有 一 个 图 像 ， 
大 人 致 如 图 5-21 所 示 。 


图 5-21 ”用 来 创建 圆 角 的 完整 图 像 
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我 会 帮 你 省 去 计算 的 麻烦 图 像 是 40 px x 40 px 大 小 的 ， 且 实际 上 是 个 半 透 明 的 PNG 图 像 ， 


上 面 有 个 打 孔 的 圆圈 和 边框 ， 且 圆圈 周围 设置 成 了 跟 页 面 总 
我 们 将 这 个 图 像 命名 为 corners.png。 
那么 现在 可 以 把 CSS 改 成 : 


b.c {position: absolute; height: 20px; width: 20px; 
background: url(corners.png) no-repeat; } 


Ab Ed, 


H A 


- 致 的 颜色 。 


这 就 是 这 里 所 需 的 全 部 改动 了 ， 背 景色 的 值 默 认 是 transparent 、 背 景 


scroll, Mo 0 被 默认 分 配给 position。 


为 了 清晰 起 见 ， 


ME BS RD AY 


现在 也 是 删除 红色 背景 规则 的 好 时 机 ,尽管 严格 地 说 并 不 是 很 必要 ， 因 为 这 条 规则 里 隐藏 的 


transparent {Ha} E 8 us fs 


现在 ， 改 变 b 元 素 的 样式 使 之 按照 我 们 的 需要 与 图 像 对 齐 ( 如 图 5-22 所 示 ): 


b.tl {top: 0; left: 0; margin: -2px 0 0 -2px; 
background-position: top left;j 

betr {top: 0; right: 0; margin: -2px -2px 0 05; 
background-position: top right;) 

b.bl (bottom: 0; left: 0; margin: 0 0 -2px -2px; 
background-position: bottom left;]j 

b.br {bottom: 0s right: 0; margin: 0 -2px -2px 0; 
background-position: bottom right;) 


Every truth has four corners: as a 


for you to find the other three. 
— Confucius 


teacher I give you one corner, and it is 


图 $-22 ”填充 到 四 角 的 图 像 创 建 了 圆 角 


束 像 这 样 ， 加 角 出 来 了。 


这 种 技术 最 棒 的 地 方 就 是 ,你 不 仪 可 以 创建 向 外 鹤 曲 的 边框 , 还 可 以 轻松 创建 琐 形 角 , 或 者 
BSA, RATATEURBUARAR TI, C 图 5-23 中 有 些 例子 )。 你 只 需要 更 换 用 来 创建 这 些 角 的 图 像 ， 


同时 也 可 能 需要 调整 一 下 b 元 系 的 大 小 。 


此 外 ,并 没有 人 强迫 你 总 是 使 用 4 个 角 。 如 果 你 只 需要 让 两 个 角 变 成 贺 角 ， 那 么 只 包含 两 个 
相关 的 b 元 素 即 可 。 例 如 ， 对 于 一 个 页 面 底部 的 页 脚 ， 你 可 能 只 和 希望 让 上 面 两 个 角 变 成 圆 角 ， 那 


e 


«div class="rounded footer"> 
(..content... 
«b class="c ti"></b> 
<b class="c tr"></b> 
</div> 


没 问 题 ! 


~ 


Every truth has four corners: as a 
teacher I give you one corner, and it 
is for you to find the other three. 
—Confucius 


Every truth has four corners: as a 
teacher I give you one corner, and it 
is for you to find the other three. 
—Confucius 


图 $-23 ”一 些 可 选 的 角 


你 可 能 已 经 注意 到 了 ， 我 把 pb 元 系 放 在 了 需要 圆 角 化 的 元 素 的 内 容 后 面 。 由 于 它们 是 使 用 缀 
对 定位 放置 的 , 因此 它们 在 需要 加 和 角 化 的 元 系 中 的 位 置 其 实 并 不 重要 。 它 们 可 以 放 在 最 前 面 、 最 
后 面 ， 全 部 随机 混合 也 可 以 。 因 此 ， 把 它们 放 在 对 你 来 说 最 有 意义 的 地 方 吧 。 

这 种 方法 有 个 缺点 就 是 ， 如 琳 你 想 改 变 页 面 背 景色 的 话 ,那么 圆 角 的 图 像 也 要 随 之 更 改 ， 以 
便 与 背景 色 对 应 。 此 外 ， 如 果 整 个 站 点 拥有 多 种 不 同 的 背景 色 ， 那么 你 需要 为 每 种 可 能 的 颜色 准 
备 相 应 的 圆 角 图 像 和 CSS。 还 有 一 个 可 能 更 大 的 缺点 就 是 ， 如 采 包 围 在 圆 角 元 系 周 围 的 育 景 不 是 
单一 的 颜色 , 比如 渐变 或 者 平 铺 的 背景 , 圆 角 和 周围 的 背景 就 无 法 正确 匹配 了 。 使 用 这 种 技术 时 ， 
你 只 能 尽量 降低 这 些 情况 发 生 的 几率 。 

还 有 一 个 关于 历史 莱 容 性 的 注意 事项 ， 即 这 种 方法 在 IE6 下 并 不 能 像 预 期 的 那样 工作 ， 除 非 
你 给 aiv 指 定 一 个 明确 的 宽度 。 你 可 以 使 用 像 系 、em、 百 分 比 或 者 其 他 的 单位 ,但 是 如 果 坚 持 使 
用 默认 值 auto 的 话 ， 压 部 的 圆 角 就 不 会 在 它们 应 在 的 地 方 了 。 这 只 是 个 小 困扰 ， 但 却 是 应 该 了 
解 的 。IE6 也 不 文 持 PNG 的 透明 ， 所 以 你 还 得 准备 一 个 督 换 用 的 GIF 图 像 ， 或 者 干脆 把 这 些 对 IE6 
全 都 隐藏 。 反 正 对 于 IE6 的 用 户 来 说 ， 页 面 上 没有 圆 角 也 不 会 使 他 们 太 痛 吉 的 。 


5.6 CSS3 圆 角 


一 旦 你 擎 握 了 如 何 控制 曲线 的 大 小 ， 这 些 事 情 束 真 的 太 简单 。 它 的 优点 是 纯 CSS 驱 动 ,不 
需要 额外 的 标记 ， 而 且 不 需要 元 系 周 于 的 平面 颜色 C flat-color )。 缺 点 是 训 览 厚 的 文 持 有 限 ， 而 
且 还 需要 烦人 的 供应 商 前 级 , 截至 撰写 本 文 之 时 , 还 没有 任何 版 本 的 正 浏 览 锅 可 以 文 持 它们 (IE9 
已 经 许诺 支持 了 ” )。 

首先 ， 找 到 5.5 节 中 的 图 5-22， 要 想 使 用 CSS3 创 建 同 样 的 基本 效果 ， 你 只 需要 这 人 么 做 : 


.rounded {background: #FFF; border: 2px solid #000; 
border-radius: 20px; } 


QD IE9 已 经 支持 CSS3 圆 角 ， 且 不 需要 供应 商 前 级 ， 使 用 border-radius 即 可 。 
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就 这 些 了 1 不 过 (和 鹤 至 撰写 本 文 之 时 ) 它 在 许多 浏览 疮 中 还 都 不 能 正 稼 工作 ， 因 为 
border-radius wA EIE 为 了 确保 之 后 的 几 年 内 它 能 在 文 持 它 的 浏览 带 中 正 稼 工作 , AL 
AEM VASE A UR, SN EE TY IN f RT LE Bea T 


.rounded {background: #FFF; border: 2px solid #000; 
-moz-border-radius: 20px; 

-webkit-border-radius: 20px; 

border-radius: 20px;} 


当 IE 能 够 支持 圆 角 ( 如 图 5-24 所 示 ) 的 时 候 , 是 不 是 还 得 声明 -ms-border-radius 呢 ?可 能 
IE, 这 取决 于 什么 时 候 border-radius 能 宣布 它 已 经 足够 稳定 以 至 于 可 以 去 掉 供 应 商 前 级 , 以 及 
什么 时 候 正 能 添加 对 它 的 支持 。 


Every truth has four corners: as a 
teacher I give you one corner, and it 


is for you to find the other three. 
—Confucius 


图 5-24 ”非常 简单 的 圆 角 


这 种 方法 的 优点 束 是 ， 你 不 需要 费力 地 摆弄 前 一 扩 那 种 技术 所 知 的 额外 的 HTML、CSS 以 及 
图 像 ， 就 能 使 元 素 的 角 变 成 豆角。 而 页 面 的 背景 也 可 以 直接 透 过 加 角 ， 无 论 是 平面 闫 色 、 渐 变 闫 
色 或 者 全 部 是 格子 图 案 孝 没 问题 。 

你 可 以 使 用 两 个 值 改 变 曲线 的 形状 ( 如 图 5-25 所 示 )， 例 如 : 


.rounded { background: #FFF; border: 2px solid #000; 
-moz-border-radius: 20px / 60 px; 
border-radius: 20px / 60px; } 


Every truth has four corners: as a 
teacher I give you one corner, and it 


is for you to find the other three. 
—Confucius 


图 5-25 ”椭圆 形 的 角 


注意 现在 这 些 角 并 不 是 完美 的 圆 弧 , 而 是 有 点 儿 椭 圆 的 意思 了 。 这 承 是 料 杠 分 隅 的 两 个 值 产生 
WAR CT RHETAR ER, WRA TRA, 则 会 将 各 个 角 设 置 成 不 同 的 大 小 , AEE PAE 
(我 去 掉 了 -webkit- 这 一 行 ， 因 为 在 所 写本 文 之 时 ，WebKit 浏 览 硬 已 经 不 文 持 这 种 写法 了 。 ) 
假说 你 故意 去 掉 了 和 斜 杠 : 


.rounded { background: #FFF; border: 2px solid #000; 
-moz-border-radius: 20px 60px; 
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border-radius: 20px 60px; } 
结果 将 如 图 $-26 所 示 。 


Every truth has four corners: as a 
teacher I give you one corner, and it 


is for you to find the other three. 
—Confucius 


图 $-26 “半径 不 等 的 角 
也 有 一 些 属性 可 以 用 于 单独 设置 每 一 个 角 ， 没 有 前 级 的 版 本 为 porder-top-right-radius、 


border-bottom-right-radius, border-bottom-left-radiusl Mborder-top-left-radius. 
每 个 属性 都 可 以 接受 一 个 或 两 个 值 : 一 个 值 可 以 生成 圆 浙 ,而 两 个 值 可 以 生成 椭圆 。 斜 杠 只 用 在 
border-radius 中 ,而且 很 有 必要 ,以 便 把 一 个 结果 (不同 大 小 的 圆 角 ) 跟 男 一 个 ( 相同 大 小 的 
WEHA) 区 分 开 来 。 

FEKE, 如果 想 文 持 WebKit 的 话 , 那么 每 个 角 的 独立 属性 就 很 有 用 了 。 这 是 因为 尽管 它 不 文 
持 像 20px 60px 这 样 的 形式 ， 但 是 它 文 持 每 个 角 的 独立 属性 。 因 此 ， 为 了 在 基于 Gecko 和 基于 
WebKit 的 浏览 器 中 都 能 得 到 图 $-26 中 所 示 的 效果 ， 你 应 该 这 样 写 : 

.rounded { background: #FFF; border: 2px solid #000; 

-webkit-border-radius: 20px; 

-webkit-border-top-right-radius: 60px; 

-webkit-border-bottom-left-radius: 60px; 


-moz-border-radius: 20px 60px; 
border-radius: 20px 60px; } 


IRH, 但 是 很 有 效 。 


5.7 CSS 精灵 


这 种 技术 最 初 是 由 Dave Shea ( 因 CSS 禅 意 花 园 而 闻名 ) 在 2004 年 提出 并 开始 流行 的 ，CSS 精 
R (CSS sprite ) 是 一 种 可 以 实现 快速 悬 停 效 果 的 技术 。 现 在 已 经 演变 成 了 通过 将 装饰 性 的 图 片 
合并 下 载 ， 从 而 降低 服务 絮 负 载 的 技术 。 

CSS 精 灵 最 基本 的 例子 就 是 包含 两 种 状态 的 图 标 ， 即 一 个 挨 着 链接 的 正常 显示 版 本 ,一 个 当 
链接 被 悬 停 时 的 “点 亮 ” 版 本 。 图 像 看 上 去 如 图 5$-27 所 示 。 


e0o0 sprites.psd @ 200% (Background, RGB/8) 


图 $-27 精灵 图 
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这 里 两 个 图 标 之 间 的 空 日 间 隐 是 有 原因 的 ,一 会 儿 你 就 会 看 到 了 。 通 过 一 点 儿 CSS， 可 以 让 
图 标 在 导航 条 中 挨 着 链接 显示 。 


.navbar li a {background: url(sprites.png) 5px 50% no-repeat; 


padding-left: 30px;} 
这 可 以 将 它们 放 在 链接 的 垂直 中 点 上 , 一 二 延 伸 到 左边 缘 。 现 在 ,要 想 使 这 个 图 标 在 链接 被 
RTI AK “Ose” CAAIS-28BTzR )， 需 要 改变 痛 景 图 像 的 位 置 。 


.navbar li a:hover {background-position: 


.navbar 
.navbar 
.navbar 
.navbar 
.navbar 


为 此 , 你 可 以 设置 一 个 包含 条 纹 以 及 各 种 不 同 链接 状态 图 标的 图 像 ， 只 需要 把 每 个 图 标 安置 


li 
li 
li 
li 
li 


oo ovo M9 9 
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-395px 50s 


re 


图 $-28 ZEE MERERI be 〈( 另 见 彩 插图 $-28 ) 


负 的 水 平 偏 移 量 的 作用 是 将 背景 图 像 癌 左 拉 过 395 px， 这 是 sprites.png 中 400 px 的 空白 减 去 原 
来 规则 中 5 px 的 仿 移 量 得 到 的 。 由 于 图 标的 “点 有 台 ” 版 本 距离 背景 图 像 的 左边 绿 400 px， 因 此 人 它 
刚好 沙 在 相同 的 地 方 。 
这 可 以 扩展 为 任意 多 种 状态 的 链接 ， 直 至 全 部 。 你 可 以 为 未 访问 的 、 访 问 的 、 悬 停 的 、 获 得 
焦点 的 以 及 激活 的 链接 都 设置 不 同 的 图 标 ( 如 图 5-29 所 示 ): 


:link {background-position: 5px 50$;j 


:visited {background-position: 
:hover (background-position: 
: focus (background-position: 
:active {background-position: 


-395px 50%; } 
-795px 50%; } 

-1195px 50%;} 
-1595px 50%; } 


在 自己 的 条 纹 中 并 留 出 足够 的 空间 ， 防 止 它们 在 其 他 链接 中 出 现 。 
在 这 种 情况 下 ， 你 需要 分 别 为 每 种 类 型 设置 乘 下 的 偏 移 量 ( 以 像素 为 单位 )， 这 里 有 个 代码 


片段 可 以 表明 我 的 


.navbar 
.navbar 
.navbar 
.navbar 


li 
li 
li 
li 


a 
a 
a. 
a 


IA 

Jos id O 
.internal: 
.external: 
internal: 
.external: 


link {background-position: 0 


0;j 


link {background-position: 50px 0;} 


visited {background-position: 
visited{background-position: 


0 -400px; } 
50px =400px +} 
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图 5-29 ”各 种 链接 状态 的 精灵 图 标 


你 或 许 以 为 这 会 导致 这 个 图 像 比 那 些 独 立 的 图 像 大 两 倍 以 上 ,但 实际 上 不 是 的 。 由 于 GIF 算 
法 的 工作 原理 ,假设 所 有 这 些 干 扰 像 取 都 是 同样 的 ( 缺少 ) 颜色 ( 如 本 例 所 示 )， 那 么 不 管 这 些 
变 体 图 标的 间隔 是 4 px 还 是 4000 px， 文 件 的 大 小 基本 上 都 是 相同 的 。 一 旦 http 头 的 多 余 大 小 以 及 
服务 器 处 理 两 个 连接 ( 每 个 图 像 一 个 连接 ) 时 的 负载 成 为 影响 你 网 站 速度 的 因子 , 那么 使 用 精灵 
将 会 很 高 效 。 

这 种 洞察 力 很 关键 , 它 可 以 使 你 理解 为 什么 有 些 站 点 竟然 把 所 有 的 图 标 、 圆 角 以 及 其 他 装饰 
性 的 小 图 全 都 塞 在 一 个 大 图 中 ， 然 后 再 简单 地 使 用 packground-position 来 显示 需要 的 图 标 。 

这 样 的 事情 可 能 会 过 度 地 杀伤 你 的 站 点 , 但 回头 再 看 看 你 的 设计 , 你 或 许 会 比 第 一 次 看 它 的 
时 候 发 现 更 多 可 以 使 用 精灵 的 地 方 。 
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这 种 技术 起 初 是 由 Doug Bowman ( 因 对 Wired 站 点 进行 全 CSS 的 重 设计 而 闻名 ) 在 2003 年 提 
出 并 开始 流行 的 ,“ 清 动 门 ”(Sliding Doors ) 是 一 种 可 以 使 文本 导航 链接 变 成 花哨 的 选项 卡 的 技 
术 。 然 而 ,通常 的 做 法 都 只 适用 于 效果 而 不 适用 于 选项 卡 。 

图 5-30 展 示 了 你 希望 看 到 的 最 终 效 采 。 


图 $-30 “最终 效果 


是 的 , 确实 可 以 直接 通过 图 片 来 实现 , 但 是 改变 选项 卡 上 的 文本 时 就 很 痛 吉 了 ,尤其 吓 选 项 


卡 有 多 种 状态 的 时 候 。 使 用 如 下 标记 就 容易 得 多 了 : 


<ul class="nav"> 
<li><a href="index.html">Home</a></1i> 
<li><a href-"products.html"»Products«/a»«/li» 
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<li><a hrefse"buy.html'»Buy!«/a»«/li- 
<li><a href="contact.html">Contact</a></li> 
</ul> 


MA, WAS “Buy!” ÆW 7 “Checkout” EKA “Store” Wii, MIR m SECTIO P ERI XC 
AST 

好 了 ， 这 是 不 错 ， 但 是 那些 选项 卡 怎么 办 ? E. 首先 你 需要 一 个 选项 卡 的 大 图 。 真 的 ， 是 
一 个 大 图 ， 要 像 图 5-31 中 所 示 的 那么 大 。 


图 5-31 ”选项 卡 的 大 图 (为 见 彩 插图 5-31 ) 
然后 把 它 切 成 两 片 一 一 左 侧 的 罕 条 以 及 其 余 的 部 分 ， 如 图 5-32 所 示 。 


O O C 7 tab-left.png O 


=_tab-bottom.png @ 100% (RGB/8) 


^0 


图 $-32 ”每 个 选项 卡 的 两 而“ 门 ” ( 另 见 彩 插图 $-32 ) 
不 管 你 信 不 信 ， 这 就 是 全 部 所 需 的 跟 图 像 相 关 的 东西 了 。 现 在 你 需要 恰当 的 CSS ( 最 终 效 果 


见 图 $-33 ): 
ul.nav, ul.nav li (float: left; margin: 0; padding: 0; list-style: none; } 5 


ul.nav (width: 100%; } 

ul.nav li (background: url(tab-right.png) no-repeat 100% 0;j 
ul.nav li a (background: url(tab-left.png) no-repeat; 

display: block; padding: 10px 25px Spx: 

font: bold lem sans-serif; text-decoration: none; color: #000; } 


图 $-33 ”最 终结 


这 就 完事 了 ， 你 已 经 拥有 选项 卡 了 ! 
如 琳 你 临时 移 除 链接 背景 的 话 ， 束 很 容易 看 出 来 它 是 如 何 工作 的 。 一旦 这 些 图 像 被 去 挥 , 你 
就 能 看 到 选项 卡 图 像 的 右 半 部 分 填充 了 整个 列表 项 。 当 然 , 链接 还 在 其 中 , 因此 当 把 链接 的 左边 


154 #5% X 果 


添上 选项 卡 图 像 左 侧 的 小 条 时 ， 它 就 会 位 于 列表 项 背景 左 侧 的 上 方 。 


现在 ,假设 你 希望 选项 卡 在 鼠标 悬 俘 时 被 点 亮 , 那么 有 两 种 方法 可 以 实现 。 两 种 方法 都 使 用 
了 任意 元 素 的 悬 停 ， 其 中 最 价 单 的 就 是 交换 图 像 。 


ul.nav li:hover {background-image: url (tab-right-hover.png) ;} 
ul.nav li:hover a {background-image: url (tab-left-hover.png) 


; color: #FFF; } 
这 里 的 缺点 就 是 ， 当 页 面 载 人 后 选项 卡 第 一 次 被 悬 停 时 ， 从 服务 需 获 取 图 像 会 稍 有 延迟 。 为 
了 避免 这 个 问题 ， 可 以 结合 使 用 CSS 精 灵 技 术 〈( 见 $.7 节 )。 现 在 的 选项 卡 看 起 来 如 图 $-34 所 示 。 


OO © | tab-sprite-l AAA 


» tab-sprite-right.png @ 100% (RGB/8) 


100% [6 | 10% [6 Doc. 1016.5K/1016.5K 


图 $-34 ”选项 卡 精 灵图 的 两 半 ( 男 见 彩 插图 5-34 ) 
悬 停 效 果 的 CSS 看 起 来 像 这 样 : 


ul.nav li:hover {background-position: 100% 400px; } 
ul.nav li:hover a {background-image: 0 400px;} 


将 这 整个 实现 思路 应 用 在 侧 边栏 也 是 很 可 行 的 , BY DASE AE AY AY TRAE RS 
卡 。 在 那 种 情况 下 ， 你 需要 把 选项 卡 的 大 图 横着 切 开 ， 而 不 能 坚 者 切 了 ， 如 图 5-35 所 示 。 


Ttab-top.png @ 100% (RGB/8) 


Ttab-bottom.png @ 100% (RGB/8) 


图 5-35 水平 选项 卡 组 的 两 半 图 刻 ( 为 见 彩 插图 5-35 ) 
然后 使 用 跟 之 前 一 样 的 标记 并 应 用 如 下 样式 : 


ul.nav, ul.nav li {margin: 0; padding: 0; list-style: none; } 
ul.nav li (background: url(tab-bottom.png) no-repeat 0 100%; } 
ul.nav li a (background: url(tab-top.png) no-repeat 0 0; 
display: block; padding: 5px. 15px; 

font: bold lem sans-serif; text-decoration: none; color: #000; 
display: block;) 
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结果 将 会 如 图 5-36 所 示 。 


图 5-36 HEMKE 


对 于 悬 停 效 末 ， 适 用 同样 的 原则 : 通过 CSS 精 灵 来 实现 即 可 。 
展望 未 来 , 终 有 一 天 多 背景 会 被 广泛 支持 , 那 时 就 可 以 把 所 有 的 选项 卡 雄 片 整合 到 一 个 元 素 
"s 
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原始 的 滑动 门 拉 术 有 个 缺点 ， 那 束 是 它 会 强迫 你 把 “页 面 背景 ”作为 选项 卡 的 一 部 分 。 这 也 
BTA, 只 要 选项 卡 周围 是 单 色 的 背景 而 且 不 会 变动 就 行 了 。 但 是 ， 如果 想 把 选项 卡 放 到 背景 5 
能 发 生变 化 的 不 同情 景 中 ， 或 者 放 在 图 案 育 景 等 上 的 话 该 怎么 办 呢 ? 

为 了 实现 这 种 效 末 , 你 需要 跟 之 前 一 样 的 一 些 选 项 卡 碎片 ， 只 不 过 这 次 要 包含 透明 的 部 分 以 
使 周围 的 背景 可 以 “ 透 过 ”它们 。 图 像 如 图 5-37 所 示 ， 为 了 简单 起 见 ， 只 使 用 纯粹 的 选项 卡 并 去 
TC EROR o 


图 5-37 ”选项 卡 的 两 半 ( 另 见 彩 插图 $-37 ) 


无 论 是 使 用 GIF89a*, 还 是 alpha 通 道 的 PNG, 都 取决 于 你 和 你 站 点 的 受众 。 我 是 使 用 PNG 的 ， 
因为 它们 可 以 创建 平滑 的 透明 边缘 。 
现在 ， 如 果 你 使 用 跟 之 前 讲 过 的 技术 一 样 的 标记 和 CSS 的 话 ， 那 么 就 会 得 到 如 图 $-38 所 示 的 


E 
2 


(D GIF89a 版 ，1989 年 7 月 发 行 。 


图 $-38 ”把 图 像 放 到 之 前 技术 所 用 的 标记 中 所 产生 的 绪 


好 吧 ,我 们 已 经 成 功 一 半 了 。 每 个 选项 卡 的 右 侧 还 好 ,不 过 我 们 可 以 看 到 左 侧 列 表 项 元 素 (Li ) 
It AIRE ROC (a) 育 景 的 透明 部 分 ， 包 括 左 上 角 ! 

想 摘 定 这 个 就 需要 一 点 儿 技 巧 了 。 首 先 , 将 链接 元 系 癌 左 拉 出 列表 项 元 素 一 些 。 这 可 以 通过 
很 多 种 方法 实现 ,或 许 最 简单 的 方法 就 是 使 用 相对 定位 使 它们 癌 左 偏 移 ( 如 图 5-39 所 示 )， 并 确 
保有 足够 的 空间 能 放 得 下 它们 。 

ul.nav, ul.nav li (float: left; margin: 0; padding: 0; list-style: none; } 

ul.nav {width: 100%; } 

ul.nav li (background: url(tab-clip-right.gif) no-repeat 100% 0; 

margin-right: 25px;} 

ul.nav li a {background: url(tab-clip-left.gif) no-repeat; 


display: blocky padding: 10px 0 5px 25px; 
position: relative; left: -—25px;} 


图 $-39 ”使 裁 切 的 选项 卡 并 肩 排列 
看 到 我 做 了 什么 吗 ” 每 个 链接 元 系 都 被 问 左 移动 了 25 px。 只 做 这 些 还 不 够 ， 因 为 这 和 意味 痢 


从 第 二 个 到 最 后 一 个 链接 部 会 履 盖 它们 前 面 的 链接 ( 列表 项 )。 给 这 些 列表 项 设置 25 px 的 右 侧 外 
边 距 可 以 为 链接 元 素 打 开 足 够 的 空间 ， 防 止 它们 之 间 出 现 重 全 或 空 日 。 

PRIM, 这 里 还 有 个 小 问题 : 每 个 选项 卡 的 右 侧 将 变 得 不 可 单 击 ， 因 为 链接 已 经 被 往 左 移 动 了 
(仔细 看 图 5-39 中 ， 其 中 最 后 一 个 选项 卡 上 的 鼠标 指针 还 是 默认 的 )。 因 此 ,更 好 的 方法 就 是 使 用 
一 点 儿 外 边 距 的 小 技巧 。 在 这 种 情况 下 ， 把 最 后 一 条 规则 改 成 : 


ul.nav li a {background: url(tab-clip-left.gif) no-repeat; 
display: block; padding: 10px 25px 5px; margin-left: -25px;} 


HENCE, Be EAE AIA] ACL 25 px, BUR P1283 7573225 px. 
这 使 得 链接 能 够 覆盖 之 前 列表 项 右 侧 伸 出 的 外 边 距 部 分 , 就 像 使 用 相对 定位 的 方法 一 样 。 不 过 这 一 
次 , 链接 的 右 侧 边 绿 是 紧 贴 者 列表 项 的 右 侧 边 绿 的 , 而 不 是 个 移 走 了 ,因此 选项 卡 可 以 按照 预期 工 
作 。 正 如 图 5-40 中 所 展示 的 ， 指 针 已 经 变 成 了 手 形 指 针 ， 而 裁 切 的 角 使 得 页 面 背景 可 以 穿 透 过 来 ! 


图 5-40 ”运作 良好 的 裁 切 选项 卡 
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5.10 CSS 视差 


CSS 视 差 ( CSS parallax ) 是 一 种 很 精巧 的 技术 ,我 们 可 以 把 它 当 做 站 点 上 的 一 个 复活 节 彩 和 蛋 
来 实现 , 同时 它 也 能 让 我 们 了 解 基于 百分比 的 背景 图 像 定位 可 以 那么 简单 而 直接 地 创造 出 意 想 不 
到 的 效果 ( 这 种 效果 很 难 通 过 打印 展示 ， 因 此 你 最 好 亲自 尝试 一 下 这 种 技术 )。 

首先 ， 考 虑 一 下 百分比 定位 是 怎么 实现 的 。 假 设 你 把 一 个 背景 图 像 的 位 置 设置 为 50% 50%, 
那么 它 的 中 心 将 与 背景 区 域 的 中 心 对 齐 。 类 似 地 ， 如 果 设 置 为 1008 100%8， 那 么 它 的 右 下 角 就 会 
和 背景 区 域 的 右 下 角 对 齐 。 图 5-41 是 两 种 不 同 的 放置 方法 示例 。 


图 5-41 设置 为 50% 50$ 和 75% 75% 时 的 图 示 ( 男 见 彩 插图 5-41 ) 


这 就 意味 着 背景 图 像 位 置 的 百分比 值 实际 上 被 使 用 了 两 次 ,第 一 次 用 于 找到 背景 区 域 中 所 害 
义 的 挟 ， 第 二 次 用 于 找到 图 像 本 号 中 定义 的 点 ， 然 后 再 把 这 两 个 点 对 齐 。 

那么 ， 当 痛 景 区 域 的 大 小 动态 改变 时 会 怎样 呢 ? 以 这 个 规则 为 例 : 

body ibackground: url(ice=-l.png) 75% 0 no-repeat; width: 100%; 

padding: 0; margins 0;} 

进一步 假设 ice-1.png 为 400 px 宽 ， 那 么 在 一 个 恰好 为 800 px 宽 的 浏览 器 窗口 中 ， 从 ice-1.png 
左边 数 第 300 个 像素 就 会 跟从 body 的 左边 数 第 600 个 像素 对 齐 ， 如 图 $-42 所 示 。 


图 5-42” 冰 柱 已 就 位 


现在 想象 一 下 ， 当 浏览 器 窗 口 变 罕 ( 因而 boqy 也 变 窗 ) 时 冰 柱 会 产生 什么 效果 。 冰 柱 会 相 
对 于 页 面 布局 向 左 移动 一 些 ， 当 然 ， 仍 然 是 对 应 body 向 左 移动 之 后 7$% 的 点 。 如 果 窗 口 和 bodqy 
变 宽 的 话 ， 则 冰 柱 就 会 回 右 侧 移动 了 。 

现在 考虑 一 下 ， 如 果 把 图 像 的 水 平 放置 位 置 改 成 530% 的 话 会 发 生 什 么 情况 。 那 会 使 图像 在 
body 中 居中 ， 而 且 图 像 的 移动 速率 会 比 设置 为 75% 时 低 。 如 果 把 它 降 到 0%， 即 挨 着 body 的 左边 
绿 放置 的 话 ， 那 么 在 body 的 大 小 改变 时 图 像 就 根本 不 会 移动 了 ( 相对 于 整个 页 面 的 布局 来 说 )。 

现在 假设 有 两 个 背景 图 ， 其 中 一 个 左 对 齐 ， 而 男 一 个 在 75% 的 位 置 ， 两 个 图 像 都 是 水 平平 铺 
的 《如 图 5-43 所 示 )， 例 如 : 


body (background: url(ice-1.png) 0 0 repeat-x; width: 100$; 
padding: 0; margin: 0; } 
divimain {background: url(ice-2.png) 75% 0 repeat-x; width: 100%; } 


{Ri scH ARBOR. AMERRE, SB OEE TEIN, fEdivimain ERIAK 
会 请 过 bodqy 上 的 冰 柱 。 这 就 是 潜在 的 有 意思 的 地 方 ， 不 过 首先 让 我 们 更 进一步 ， 把 bodqy 的 背景 
移动 一 下 使 它 不 再 是 左 对 齐 。 

body (background: url(ice-1.png) 25% 0 repeat-x; width: 1003; 


padding: 0; margin: 0;} 
divimain {background: url(ice-2.png) 75% 0 repeat-x; width: 100%; 


w 
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图 5-43 ”两 组 冰 柱 〈 另 见 彩 插图 $-43 ) 
现在 ， 当 浏览 融 窗 口 改变 尺寸 时 两 组 冰 柱 都 会 移动 ， 但 是 速率 却 不 相同 。 事 实 上 ，bodqy 上 


冰 柱 的 移动 速率 是 其 尺寸 改变 速率 的 14， 而 qiv#main 上 冰 柱 的 移动 速率 是 其 尺寸 改变 速率 的 
3/4。 那 么 ， 如 果 以 12 px/s 的 速率 改变 窗口 的 太 寸 ,那么 body 的 硼 景 就 会 以 3 px/s 的 速率 移动 ， 而 
div#main 的 背景 会 以 9 px/s 的 速率 移动 。 

因此 ,如 果 和 硕 望 青 景 移 动 的 速率 大 于 尺寸 改变 的 速率 , 那么 应 该 给 水 平 的 偏 移 量 设置 一 个 大 
于 100% 的 百分比 值 。 假 设想 让 背景 图 像 沿 着 boqy 的 顶部 移动 的 话 ， 那 么 要 使 背景 图 像 移动 的 速 
率 为 尺寸 改变 速率 的 两 倍 ， 因 而 应 使 用 200% 0 的 background-position (背景 定位 值 ) #48 
使 其 沿 着 body 的 底部 移动 ， 那 么 这 个 值 应 该 为 200% 100%8， 而 使 其 在 body 中 垂直 居中 的 话 则 应 
该 设 为 200g% 50%。 

现在 ,为 了 能 人 够 产生 真实 的 视差 感觉 ,我 们 可 以 使 用 负 的 百分比 值 , 来 让 图 像 朝 着 与 窗口 尺 
sp 9357; Tad FEZ EA I8] o 

Atk, SER ata ASE Ale eo. TED Vas AE7E IN LE RR I8] Aceh A IR] , 
你 可 以 实现 相反 的 效果 。 例 如 : 


body (background: url(ice-1.png) -75% 0 repeat-x; width: 100%; 
padding: 0; margin: 0;} 
div#main {background: url(ice-2.png) 75% 0 repeat-x; width: 100%;} 
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HIE BC, DN bai Bd L1 AEST ICE-T BY , 
这 会 产生 类 似 “ 放 大 ”的 效 末 。 而 当 窗 口 变 罕 时 ， 冰 柱 会 绷 同 窗口 的 中 心 移 动 ,类似 “缩小 ”的 
AUR o 


5.11 参差 浮动 
许多 设计 师 的 愿望 清单 上 都 有 这 样 一 件 事 ， 那 就 是 希望 能 够 使 文本 沿 着 不 规则 的 形状 浮动 ， 


而 不 想 每 天 都 对 着 元 素 框 。 好 吧 ， 这 不 仅 是 可 能 的 ， 而 且 简单 又 可 知 ， 尽 管 会 使 用 许多 标记 。 
假设 你 想 让 文本 沿 着 一 条 平 绥 的 倾斜 曲线 流动 放置 ， 如 图 5-44 所 示 。 


Ah, the appeal of curves and other flowing shapes. They 

comes to text flows on the Web, everything's been on the stra 

stuff. Until now, anyway. Yes, the text is flowing along with the 
Web design was all about straight lines and boxes. 


Gently Floating... 


All I did to make this happen was create a 100x100 image of a 
(depending on the stratum) and only as wide as necessary to sho 


Stack all five strata together (without the borders, of course) and 
stack up, and text can flow around them, and their decreasing wic 
the text away from the curve; the greater the margin value, the fu 


Taking it Further 


Of course, the original image could have been sliced up into five 
download that many images. On the other hand, you could try a \ 


图 5-44 SCAT HA Do TC AY TRU DAC 


EA WRAAE, XE? SE EAA TAL, rs CES] HL ZEE SEDIT HH ZU — ME, EA 
后 浮动 所 有 的 图 像 。 首 先 创 建 20 px 高 的 曲线 分 片 ， 并 且 确 保 它 们 在 曲线 外 部 包含 透明 区 域 〈 如 
图 5-45 所 示 )。 

注意 每 个 分 斤 是 如 何 恰好 宽 到 包含 曲线 的 可 视 部 分 的 , 并 且 不 多 也 不 少 。 现在 把 这 些 分 片 丢 
到 标记 中 ， 并 放 到 你 希望 曲线 开始 的 那个 点 之 前 。 


«div class="curves"> 


«img srcocs'curve 1 .yif" alc="" 
sing mres'cutve.2.01f'.2]55"* 
<img grce'curve.3. dif" alts"^ 
«img src-"curve 4.gif" alts"" 


VM V M NM 


“img sros'curve 5.dq1f" altzs'" 
</div> 
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图 $-45 ”人 带 有 分 片 指示 的 曲线 


当然 ， 更 多 的 分 斤 联 意味 着 更 多 的 img 元 系 ， 相 信 你 已 经 了 解 这 点 了 。 那 么 CSS 就 非 稼 非常 
fa] APL 

.curves img {float: left; clear: left; margin-right: lem; } 

外 边 距 可 以 防止 文本 距离 分 片 太 近 , 而 且 可 以 按 需 进行 调整 。 WRAAE ARS IE T Mi T 
边框 ， 如 图 5-46 中 左上 角 所 示 ， Monum EE TEA 


.curves img (border: 1px solid red;} /* temporary */ 


Ma Ah, the appeal of curves and other flowing shapes. They 

Á comes to text flows on the Web, everything's been on the stre 

stuff. Until now, anyway. Yes, the text is flowing along with 
thought Web design was all about straight lines and boxes. 


Gently Floating... 


All I did to make this happen was create a 100x100 image of a 
(depending on the stratum) and only as wide as necessary to shov 


Stack all five strata together (without the borders, of course) and v 
stack up, and text can flow around them, and their decreasing wid 
the text away from the curve; the greater the margin value, the 


Taking it Further 


= course, - Mp a — could ned m CÓ up into five s 
On the 


15-46 ”开局 曲线 分 片 的 边框 使 之 可 见 
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这 种 技术 也 不 局 限于 简单 的 曲线 。 使 用 同样 的 方法 ,在 给 定 任何 不 规则 形状 ( 例如 图 5-47 中 
所 展示 的 曲线 ) 的 情况 下 ， 我 们 都 可 以 使 文本 流动 在 它 的 峰 谷 之 间 ( 如 图 5-48 所 示 )。 


oa 


| 
EN 

"m 
i 


图 $-47” 珊 有 分 片 指示 的 更 复杂 的 曲线 


实现 该 技术 的 这 个 版 本 所 使 用 的 CSS 与 之 前 的 完全 相同 ， 只 是 分 片 变化 了 而 已 。 

请 注意 一 件 事 : 从 一 个 分 请 到 下 一 个 分 所 的 宽度 变化 越 激进 , 在 文本 与 图 像 之 间 就 越 有 可 能 
产生 重合 。 之 所 以 会 发 生 这 种 情况 是 因为 , 浏览 带 不 会 检测 沿 着 元 素 框 边 绿 的 每 一 个 像 系 来 确定 
它们 是 否 上 覆 兰 了 有 茶 个 浮动 元 系 。 例 如 ,各 种 浏览 锅 可 能 只 检测 框 的 左上 角 。 如 果 只 是 几 个 像素 在 
一 个 很 宽 的 浮动 图 像 上 ， 那 么 那 行 的 文本 就 会 履 善 那个 很 宽 的 图 像 。 

当然 ,创建 这 些 分 请 有 点 几 烦 人 ,而 且 服 务 厦 的 开销 怎么 处 理 呢 ? 幸运 的 是 ,这 种 技术 还 有 
一 个 改进 的 变 体 一 一 将 在 下 一 节 进 行 前 述 。 
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Ah, the appeal of curves and other flowing shapes. They 
when it comes to text flows on the Web, everything's been on 
that other stuff. Until now, anyway. Yes, the text is flowing a 
And you thought Web design was all about straight lines a 


Gently Floating... 


All I did to make this happen was create a 100x200 image of a cu 
wide as necessary to show the curve without any clipping. 


Stack all ten strata together and we get the same curve I started with. B 
around them, and their decreasing width allows the text to roughly follo 
curve; the greater the margin value, the further away text will be pushed 


Taking it Further 


Of course, the original image could have been sliced up into five strata, 
download that many images. On the other hand, you could try a variant 


图 $-48 ee AZEBJISADNGR 


5.12 ”更 好 的 参差 浮动 


在 5.11 市 曾 述 的 “参差 浮动 ”技术 的 基础 上 ，Nilesh Chaudhari 提 出 了 他 称 为 “超级 参差 浮动 ” 
( Super Ragged Floats ) 的 技术 , 同名 文章 发 表 在 Evolt 上 ( http://www.evolt.org/article/Super Ragged - 
Floats/22/50410/ ), Nilesh Chaudhari 的 见解 不 是 将 图 像 分 片 ， 而 是 把 图 像 放 在 背景 中 ， 然 后 将 透 
明 的 框 窗 新 在 上 上面。 这 个 方法 的 缺点 就 是 ， 它 要 求 你 在 浮动 的 分 片 和 伴随 它们 的 内 容 之 外 包 吾 
div。 因 此 ， 基 于 Nilesh Chaudhari 的 基于 原始 方法 的 工作 ， 这 里 有 个 可 以 让 你 使 用 较 少 的 自 包含 
标记 创建 曲线 及 参差 轮廓 的 技术 变 体 。 

首先 ， 考虑 前 一 万 中 的 这 些 标记 ,假设 你 已 经 把 所 有 的 图 像 都 转换 成 了 空 的 div。 

<div class="curves"> 

«div id="s11"></div> 

<div id="s12"></div> 

<div id="s13"></div> 

<div id="s14"></div> 


<div id="s15"></div> 
</div> 


ME, PURRIA WRR Cun 5-499 07m )。 

此 时 此 刻 ， 你 已 经 有 了 使 文本 流 呈 现 曲 线 所 需 的 全 部 条 件 了 ， 只 需要 在 CSS 中 再 添加 一 些 尺 
寸 调 整 和 背景 定位 就 大 功 告 成 了 (如 图 5-50 所 示 ): 

.Curves div (float: left; clear: left; margin-right: 20px; height: 20px; width: 100px; 

background: url(curve.png) no-repeat; } 

.curves #s12 {width: 42px; background-position: 0 -20px; } 


.curves #s13 (width: 21px; background-position: 0 -40px; } 
.curves #sl14 {width: 10px; background-position: 0 -60px; } 


164 第 5 章 效 果 


.curves #s15 {width: 5px; background-position: 0 -80px;} 


sox [(|  — Dec 29.3K/977K — [b 


图 5-49 ”Photoshop 中 展示 的 曲线 图 像 


Ah, the appeal of curves and other flowing shapes. 
when it comes to text flows on the Web, everything's been 

that other stuff. Until now, anyway. Yes, the text is flowing alor 
you thought Web design was all about straight lines and boxes. 


Gently Floating... 


All I did to make this happen was create a 100x100 image of a 


or 20 pixels tall (depending on the stratum) and only as wide as neq 


Stack all five strata divs together and visually we get the same 
text can flow around them, and their decreasing width allows the te 
from the curve; the greater the margin value, the further away text 


Taking it Further 


Of course, the original image could have been placed into five strat 
markup and CSS. On the other hand, you could try a variant on sin 


图 5-50 ”对 div 使 用 背景 定位 后 在 浏览 带 中 呈现 出 的 曲线 效果 
当然 也 可 以 通过 迄 入 CSS 实 现 这 些 东 西 ， 如 果 你 很 想 这 么 做 的 话 。 这 样 的 话 ， 所 有 包含 人 D 的 


规则 以 及 ID 本 身 就 都 没有 用 了 ， 只 保留 .curves 这 条 规则 即 可 。 不 过 另 一 方面 ， 将 会 有 一 大 堆 的 
CSS 弄 乱 你 的 标记 。 
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<div class="curves"> 

<div></div> 

<div style="width: 42px; background-position: 0 -20px;"></div> 
<div style="width: 21px; background-position: 0 -40px;"></div> 
<div style="width: 10px; background-position: 0 -60px;"></div> 
<div style="width: 5px; background-position: 0 -80px;"></div> 
</div> 


选择 权 在 你 的 手中 ， 请 明智 选择 。 

这 种 扩 术 还 有 一 个 技巧 (同时 也 可 以 应 用 在 上 一 节 展 示 的 分 斤 的 版 本 中 ) 就 是 , 它 并 不 限制 
所 有 的 aiv 郡 必须 等 高 。 如 采 曲 线 有 一 部 分 区 域 是 不 区 曲 的 ， 那 么 你 可 以 将 对 应 的 aiv 伸 展 到 恰 
当 的 高 度 ， 这 会 减少 所 需 的 元 素 。 你 可 以 使 用 图 像 编 辑 程 序 事先 把 流动 的 框 ( 如 图 5-51 所 示 ) imi 
出 来 好 好 计划 一 下 。 


图 5-51 ”Photoshop 中 展示 流动 的 框 


166 第 5 章 X AR. 


然后 框 的 大 小 就 可 以 下 接 复 制 到 你 的 文档 中 了 。 图 5-52 展 示 了 最 终结 米 。 


<div class="curves"> 

<div style="width: 8px; height: 40px;"></div> 

<div style="width: 25px; height: 20px; background-position: -40px; "></div> 
-60px; "></div> 
-75px; "></div> 
-90px; "></div> 
<div style="width: 97px; height: 15px; background-position: -110px; "></div> 
<div style="width: 100px; height: 50px; background-position: 0 -125px;"></div> 
-175px; "></div> 
-190px; "></div> 
-2 10px; "></div> 
-22 5px; "></div> 
-2 40px; "></div> 
<div style="width: 8px; height: 40px; background-position: 0 -260px; "></div> 
</div> 


<div style="width: 50px; height: 15px; background-position: 
<div style="width: 75px; height: 15px; background-position: 
<div style="width: 92px; height: 20px; background-position: 


oOo OOOOD 


<div style="width: 97px; height: 15px; background-position: 
<div style="width: 92px; height: 20px; background-position: 
<div style="width: 75px; height: 15px; background-position: 
<div style="width: 50px; height: 15px; background-position: 


oOo OO CO 0 


<div style="width: 25px; height: 20px; background-position: 


Ah, the appeal of curves and other flowing shapes. They have their 
to text flows on the Web, everything's been on the straight and b 
Until now, anyway. Yes, the text is flowing along with the c 
Web design was all about straight lines and boxes. 


Gently Floating... 


All I did to make this happen was create a 100x300 i 
"strata" divs, each as tall as needed (depending on the 
the curve without any clipping. 


Stack all the strata divs together and visually we get the sam 
and text can flow around them, and their decreasing width allow 
text away from the curve; the greater the margin value, the further 


Taking it Further 


Of course, the original image could have been placed into five strata, 
markup and CSS. On the other hand, you could try a variant on singl 
one-pixel div, exactly the right size to make up part of the curve, and 


图 5-52 ”通过 这 个 变 体 技术 使 波形 就 位 


5.13 图像 的 框 


有 些 关 于 图 像 的 东西 , 大 多 数 人 至 今 都 没有 意识 到 : 它们 与 其 他 元 系 拥 有 相同 的 盒 模型 ( box 
model), iX% EAT SY LAX ou RMH U es A PL SEEK 

为 什么 要 纠结 这 个 呢 ? E, 以 为 一 个 拥有 透明 部 分 的 方形 图 标 填充 背景 色 的 方法 为 例 , 它 
看 上 去 像 是 这 样 ( 如 图 5-53 所 示 ): 


img.icon {background-color: #826;} 
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img.icon:hover {background-color: #C40;} 


图 5-53” 悬 停 和 未 巧 停 状态 的 图 标 ( 男 见 彩 插图 5-53 ) 
如 图 5-54 所 示 ， 你 甚至 可 以 为 图 像 设置 背景 图 像 ， 这 可 以 做 出 一 些 有 趣 的 组 合 效 末 。 


img.flakel {background-image: url(flakel.png) center no-repeat; } 
img.flake2 {background-image: url(flake2.png) center no-repeat; } 
img.flake3 {background-image: url(flake3.png) center no-repeat; } 


<img src="flake-a.png" class-"flakel1" alt=""> 
<img src="flake-a.png" class-"flake2" alt=""> 
<img src="flake-a.png" class="flake3" alt=""> 


«img src-"flake-b.png" class-"flakel" alt=""> 
«img src="flake-b.png" class-"flake2" alt=""> 
<img src="flake-b.png" class="flake3" alt=""> 


图 5-54 组合 的 雪花 
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VIL da nf EAR TRI ERR HERRE. EKE, 通过 痛 丸 色 、 边 框 以 及 内 边 中 的 组 合 ， 可 以 
使 图 像 看 上 去 具 腔 浅 不 一 的 双 层 边框 (如 图 $-55 所 未 )。 


img.twotone {background: #C40; padding: 5px; border: 5px solid #4C0;} 


图 $-55 ”通过 内 边 距 和 边框 实现 的 深浅 不 一 的 双 层 边框 ( 男 见 彩 插图 5-55 ) 
再 加 上 轮 廊 的话， 你 就 会 得 到 类 似 三 层 边 框 的 效果 了 如 图 5-56 所 示 )。 


img.threetone {background: #C40; padding: 5px; border: 5px solid #4C0; outline: 
5px solid #40C;} 


图 $-$6 ”通过 内 边 距 、 边 框 和 轮廓 实现 的 三 层 深 浅 不 一 的 边框 


5.14 受 限 的 图 像 


继续 上 一 节 的 “折腾 ”好 玩 图 像 的 主题 , 这 里 有 个 可 以 使 它们 在 不 撑 爆 其 父 元 素 的 情况 下 尽 
可 能 变 大 , 或 者 是 强制 它们 根据 原始 尺寸 按 比例 放大 的 方法 。 这 是 个 非常 好 用 的 效果 ， 尤 其 是 当 
你 要 在 页 面 中 包含 照片 或 者 其 他 可 能 的 大 图 ， 又 要 确保 它们 不 会 破坏 浏览 器 中 紧凑 的 布局 时 。 
img {max-width: 100%; } 

这 条 简单 的 规则 会 保证 图 像 不 会 比 包 含 它们 的 元 素 更 宽 , 不 过 在 父 元 素 比 这 些 图 像 宽 的 情况 
它们 会 保持 原始 尺寸 。 你 可 以 通过 把 图 像 在 其 父 元 素 中 居中 来 进行 强化 ， 像 这 样 ， 

img max-width: 100%; display: block; margin: 0 auto;j 

图 5-57 展 示 了 将 同一 个 图 像 放 在 3 个 不 同 宽度 父 元 素 中 的 例子 ,其 中 两 个 父 元 素 比 图 像 还 罕 ， 
一 个 比 图 像 宽 ( 父 元 素 的 边缘 已 通过 边框 标 出 )。 
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[5-57 相同 图 像 的 3 个 实例 


这 很 明显 会 使 你 的 图 像 任 由 浏览 疮 的 缩放 操作 摆布 ,因为 它们 会 缩小 图 像 。 幸 运 的 是 ,大 多 
数 训 览 融 已 经 可 以 很 好 地 处 理 这 些 问 题 ， 而 不 需要 太 多 令 人 抓 狂 的 、 粳 糕 的 人 工 措施 了 。 


本 ,部 ,分 ,内 , 容 


m HOR 表格 
m 第 7 章 可 预见 的 未 来 


表 ^" 


TE AIX ESE ATOR E A ee CSI. TETRLACRIEOSEAS DEZ TI DER 91 
面 布局 中 。 很 明显 这 是 正确 的 ,表格 确实 不 应 该 用 在 布局 中 。 为 一 方面 ， 对 表格 进行 布局 操作 其 
实 是 一 个 很 精细 而 又 经 稼 被 忽略 的 工作 。 蛙 竟 ， 有 时 候 你 需要 呈现 一 个 数据 表 , 因此 对 表格 过 于 
敷衍 了 事 并 不 明智 。 

本 章 探 索 一 些 在 样式 设计 中 充分 利用 表格 结构 的 方法 ， 同 时 会 把 表格 变 成 完全 不 同 的 样子 ， 
璧 如 地 图 或 柱状 图 。 和布 望 谈 完 本 章 后 ， 你 会 发 现 表 格 跟 其 他 任何 的 标记 集合 都 是 一 样 的 ， 午 可 以 
给 样式 设计 提供 无 限 的 发 挥 空间 。 


6.1 表 头 、 主 体 和 脚注 


HTML 为 表格 定义 了 3 个 元 素 用 于 对 行进 行 分 组 ,它们 是 thead(〈 表 头 ) tbody (表格 主体 ) 
和 tfoot (脚注 )。 肥 不 奇怪 ， 这 些 元 素 分 别 代表 了 表格 的 表 头 、 主 体 部 分 以 及 脚注 部 分 。 
下 面 是 一 个 精简 的 表格 结构 ， 使 用 了 其 中 的 两 个 分 组 元 素 。 


<thead> 
< 七 工 >...< /七 工 > 
</thead> 
<tbody> 
<tr>...</tr> 
<tr>...</tr> 
SLE NIST DE 
< 七 工 >...< /七 工 > 
</tbody> 
</table> 


RERIT RRES, 同时 在 语义 方面 也 很 友好 , 不 过 更 棒 的 是 你 可 以 使 用 它们 
单独 对 表 头 里 的 元 素 应 用 与 主体 不 同 的 样式 〈《 如 图 6-1 所 示 )。 因 此 ， 你 可 以 使 每 一 列 的 标题 (在 
theadH! ) 大 中 对 齐 而 使 每 一 行 的 标题 ( 在 tbody 中 ) AXTFF. 


thead th (text-align: center; } 
tbody th (text-align: right;) 


类 似 地 ， 你 也 可 以 改变 各 目 分 组 中 单元 格 的 颜色 、 育 景 、 内 边 距 以 及 其 他 任何 可 以 对 表格 单 
元 格 应 用 的 样式 ， 恰 当地 引用 那个 元 系 即 可 。 
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| a Q 8 | a 
#207 | $11,940 | $12,348 | $14,301 | $17,208 
#B315 | $9,345 $9,834 $10,035 | $9,672 


| #207-B36 | $2,787 | $3,123 | $4,137 | $3711 | 


图 6-1 居 右 和 居中 对 齐 不 同类 型 的 标题 单元 格 


关于 这 些 行 分 组 元 系 有 个 令 人 惊奇 的 事实 , 那 就 是 即使 你 没有 明确 地 把 它们 写 出 来 , 大 部 分 
浏览 需 也 会 在 DOM (Document Object Model， 文 档 对 象 模型 ) 中 创建 它们 (如 图 6-2 所 示 ) 在 这 
些 浏览 俘 中 ， 下 面 的 规则 总 是 会 失效 : 


table > tr {font-weight: bold;j 


<html> 

<head> 

<title>Table Groupers</title> 
<style type="text/css" media-"all"» 
table > tr {font-weight: bold;} 
</style> 

</head> 

<body> 


<table> 

<tr> 
«td»Text!«/td» 
</tr> 

</table> 


</body> 
</html> 


图 6-2 ”如 果 没 有 明确 写 出 ， 浏 览 希 会 目 动 创建 一 些 元 素 


这 是 因为 在 table 和 tr 之 间 总 是 有 个 tbody 存 在 ， 尤 其 是 当 源 代码 中 并 没有 写 分 组 元 系 时 ， 
浏览 右 也 会 自动 创建 tbody。 因 此 你 可 以 把 之 前 那 条 规则 的 选择 硕 改 写成 table > tbody > tr, 
DORE REA] LADO BCE TT4T2H2028 8917 T o 

更 加 令 人 惊奇 的 是 ， 在 HTML 4 中 文档 结构 中 的 tfoot 必 须 出 现在 tpody 之 前 。HTML 5 去 挥 
了 这 个 限制 ， 人 允许 tfoot 跟 随 在 tbody 之 后 ， 而 且 各 个 浏览 锅 也 不 再 强制 执行 HTML 4 的 规则 了 。 
所 以 尽管 它 令 人 尺 奇 ， 但 是 也 算 不 上 难以 承受 了 了 。 

理论 上 讲 , 在 多 视 口 (mnultiple viewport ) 中 显示 的 表 头 和 脚注 行 应 该 放 到 每 一 个 表格 片段 的 
顶部 和 底部 。 以 花哨 的 规范 方式 来 讲 就 是 ， 如 果 你 打印 一 个 有 好 几 页 长 的 表格 ,那么 表 头 和 脚注 
应 该 放 到 每 一 页 或 者 每 一 页 上 出 现 的 表格 片段 的 项 部 和 底部 。 然 而 , 请 注意 我 使 用 的 词 是 “理论 
于 讲 ”。 在 实际 应 用 中 ， 这 是 不 可 能 发 生 的 ， 也 许 有 一 天 能 够 做 到 吧 。 正 如 服务 员 格 罗 弗 "所 说 : 


D CZ Sesame Street) 中 的 人 物 。 《芝麻 街 》 于 1969 年 首播 ， 是 迄今 为 止 获得 艾 美 奖项 最 多 的 儿童 节日 ， 网 
址 为 http://www.sesamestreet.org/。 
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活着 就 是 希望 。 


记 住 ， 包含 thead 和 tfoot 的 最 大 优点 之 一 就 是 ， 


样式 。 作 为 例子 ， 考 虑 下 面 的 HITML 5 片段 : 


<table> 
<thead> 
<tr> 
<th 
<th 
<th 
<th 
</tr> 
</thead> 
<tbody> 
</tbody> 
<tfoot> 
<tr> 
<td> 
<td> 
<td> 
<td> 
</tr> 
</tfoot> 
</table> 


现在 , 假设 你 想 在 列 标题 的 下 面 划 一 条 线 , 并 且 在 脚注 的 汇总 数据 上 面 也 划一 条 线 , 如 图 6-3 


sScopes"col'»01«/th» 
scope="col">Q02</th> 
scope="col">Q03</th> 
scope="col">Q04</th> 


$83,340</td> 
$87,195«/td» 
$91,022</td> 
$90,489</td> 


可 以 用 于 对 其 包含 的 表格 单元 格 单独 应 用 


所 示 。 那 么 不 需要 使 用 任何 的 类 ， 只 使 用 表格 本 里 的 结构 即 可 。 


thead th 
tfoot th 


{border-bottom: 


, tfoot td (border-top: 


#207-B34 
#207-B35 
#207-B36 
#208-A07 
$£208-A11 


#208-A12 
#208-A13 
#208-A23 
#209-C17 
#209-C55 
Total 


图 6-3 


lpx solid #333; 
2px solid #666; 


Q1 
$11,940 
$9,345 
$2,787 
$1,657 
$8,947 
$9,034 
$10,633 
$15,856 
$8,245 
$4,896 
$83,340 


Q2 
$12,348 
$9,834 
$3,123 
$3,003 
$7,249 
$11,027 
$12,574 
$16,239 
$6,929 
$4,869 
$87,195 


text-align: 


Q3 
$14,301 
$10,035 
$4,137 
$2,882 
$8,102 
$11,793 
$12,834 
$16,057 
$6,498 
$4,383 
$91,022 


color: 


center; 
#363;} 


Q4 
$17,208 
$9,672 
$3,711 
$2,690 
$7,821 
$10,283 
$11,568 
$15,712 
$5,016 
$6,808 
$90,489 


通过 边框 使 表 头 以 及 脚注 与 表格 主体 区 分 开 来 


font-weight: 


bold; } 


6.2 {Tine 


6.1 节 中 提 到 了 行 标题 。“ 行 标题 ? ”你 或 许 会 自 言 自 语 ,“ 我 以 为 只 有 列 才 会 有 作为 标题 的 
单元 格 呢 。” 事 实 上 不 是 这 样 的! 有 一 个 HTML 属 性 在 当初 设计 的 时 候 就 是 用 来 让 你 指定 一 个 th 
元 素 是 列 标题 还 是 行 标题 的 。 

考虑 下 面 的 标记 : 


<table> 

<thead> 

<tr> 

<th></th> 
<th>Pageviews</th> 
<th>Visitors </th> 
</tr> 

</thead> 

<tbody> 

<tr> 

<th>January 2010</th> 
<td>1,367,234</td> 
<td>326,578</td> 
</tr> 

<tr> 

<th>February 2010</th> 
<td>1,491,262</td> 
<td>349,091</td> 
</tr> 

</tbody> 

</table> 


注意 表格 主体 中 的 每 seaman cs ASH te 1 Tadd. 相信 大 家 都 可 以 推断 出 它们 跟 
行 中 后 面 的 数据 是 相关 的 。 即 使 浏览 如 可 能 也 会 推断 出 同样 的 结论 。 不过, 最 好 还 是 像 这 样 明确 
指出 : 


<table> 

<thead> 

<tr> 

<th></th> 

<th scope="col">Pageviews</th> 
<th scope="col">Visitors </th> 
</tr> 

</thead> 

<tbody> 

<tr> 

«th scope="row">January 2010</th> 
<td>1,367,234</td> 
<td>326,578</td> 

</tr> 

<tr> 

<th scope="row">February 2010</th> 
<td>1,491,262</td> 
<td>349,091</td> 
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</tr> 
</tbody> 
</table> 


为 th 元 素 恰 当地 添加 已 赋值 的 scope (作用 域 ) Je E, FAS AAA TURIN] Ath 3 t. 
周围 单元 格 的 关系 〈 如 图 6-4 所 示 )。 


Web traffic 
Month Pageviews Visitors 


January 2010 1,367,234 326,578 
February 2010 | 1,491,262 349,091 


图 6-4 ”基于 标题 单元 格 的 作用 域 为 其 应 用 样式 
在 可 视 化 的 浏览 各 中 ,这 算 不 了 什么 ,不 过 你 可 以 使 用 属性 选择 各 对 这 两 种 类 型 单独 应 用 样式 。 


th[scope="col"] {border-bottom: 1px solid gray;) 
th[scope="row"] {border-right: lpx solid gray; } 


这 可 以 成 为 挂 载 样式 时 很 方便 的 一 个 钩子 (hook )。 在 这 种 特定 的 情况 下 ， 同 样 的 效果 也 可 
以 通过 thead th 以 及 tbody th 达到 ,不 过 有 了 时候 可 能 会 有 行 标题 在 theagd 中 或 者 列 标题 在 tbody 
中 的 情况 。 因 此， 最 好 做 好 两 手 准备 。 

在 具有 有 姑 读 功 能 的 浏览 器 中 ,理论 上 通过 scope 的 值 使 表格 的 列 和 行 标题 与 每 个 单元 格 的 内 
容 相 关联 , 可 以 使 表格 更 容易 理解 。 因 此, 当 具 备 明 读 功 能 的 浏览 幕 移 到 之 前 展示 的 表格 上 面 时 ， 
对 于 第 一 行 它 可 能 会 说 "页面 浏览 量 二 零 一 零 年 一 月 一 百 三 十 六 万 七 千 二 百 三 十 四 一 一 访问 量 二 
零 一 零 年 一 月 三 十 二 万 六 千 五 百 七 十 八 。” OU (我 放 破 折 号 的 地 方 可 能 会 被 读 成 “数据 单元 格 ” 
或 者 类 似 的 东西 ， 不 过 你 明白 我 的 意思 。 

再 一 次 地 ， 注 意 我 的 用 词 “ 理 论 上 ”。 在 这 种 情况 下 ， 至 少 有 些 具备 明 读 功能 的 浏览 器 支持 
使 用 scope 帮 助 其 做 决定 ， 不 过 一 般 默 认 是 不 开局 这 个 功能 的 。 


6.3 面向 列 的 梓 陈 


你 可 能 已 经 习惯 了 操作 表格 的 行 , 但 是 有 时 候 可 能 需要 对 表格 的 列 设置 样式 。 相 对 于 使 用 一 
些 丑 陋 而 复杂 的 方法 ， 厂 想 简 单 地 对 列 应 用 样式 束 很 难 了 。( 你 明日 我 的 意思 吗 ? ) 
使 用 标记 实现 的 最 简单 方法 就 是 应 用 col 元 素 ， 以 下 面 这 个 简单 的 表格 为 例 。 


<table> 


«col span="2" /> 
<col /> 

<col /> 

<tbody> 

< 七 工 > 


中 浏览 希 肝 读 的 是 英文 ， 这 里 是 译文 ， 目 前 还 没有 如 此 智能 的 中 文 屏 右 阅读 需 。 
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«td»Row 1 cell 1</td> 
<td>Row 1 cell 2</td> 
<td>Row 1 cell 3</td> 
<td>Row 1 cell 4</td> 
<td>Row 1 cell 5</td> 

</tr> 

<tr> 
<td>Row 2 cell 1</td> 
<td>Row 2 cell 2</td> 
<td>Row 2 cell 3</td> 
<td>Row 2 cell 4</td> 
<td>Row 1 cell 5</td> 

</tr> 

</tbody> 

</table> 


这 会 设置 3 个 列 ， 其 中 一 个 “路 越 ” 了 每 行 的 两 个 单元 格 ， 另 外 两 个 包含 每 行 的 一 个 单元 格 。 
这 些 加 起 来 是 每 行 4 个 单元 格 , 而 你 可 以 看 到 现在 每 行为 5 个 单元 格 。 这 意味 者 每 行 的 最 后 一 个 单 
元 格 不 属于 列 结构 。 

那么 如 何 为 已 有 的 各 列 设置 样式 呢 ( 如 图 6-5 所 示 ) ? 这 似乎 非常 简单 ， 只 需要 给 co1 元 素 应 
用 CSS。 


col {background: red; width: 10em; } 


Row 1 cell 5 
Row 1 cell 5 
图 6-5 ”对 列 元 又 应 用 样式 


这 个 非常 有 限 的 例子 几乎 在 现今 可 用 的 任何 浏览 硕 中 都 能 恨 好 地 工作 。 如 采 只 是 为 列 设置 简 
单 的 背景 色 以 及 宽度 ， 那 么 你 将 畅通 无 阻 。 

然而 ， 如 末 你 想 对 列 应 用 任何 其 他 样式 的 话 ， 束 没 那么 走运 了 。 这 是 因为 CSS 规 范 只 人 允许 除 
此 之 外 的 两 个 属性 应 用 在 表格 的 列 上 ， 即 border (边框 visibility (可 见 性 )， 而且 两 者 
ABYSS HEB YZ SCH o 
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休会 在 整个 列 的 外 面 绘制 边框 , 而 为 外 一 些 则 会 将 边框 应 用 在 列 本 里 以 及 该 列 所 包含 的 全 部 单元 
格 上 。 如 果 只 是 设置 1 px 的 实 线 边框 可 能 还 会 得 到 相对 不 错 的 结果 ， 但 如 果 更 粗 或 者 不 是 实 线 的 
话 就 完了 。 它 还 要 求 你 对 所 有 的 表格 声明 table (border-collapse: collapse;}， 如 果 想 让 
表格 表现 更 加 一 致 的 话 ， 这 才 是 更 值得 了 解 的 。 

在 后 一 种 情况 中 ， 你 能 做 的 只 是 通过 设置 visibility: collapse 隐 藏 整个 列 。 这 很 好 ， 不 
过 它 并 非 在 所 有 浏览 硕 中 者 工作 恨 好 ， 尤 其 是 在 Safari 和 Chrome 以 及 它们 的 移动 版 上 。 

你 们 当中 的 有 些 人 可 能 确信 曾经 昕 说 过 关于 在 列 元 系 上 应 用 其 他 CSS 属 性 的 事情 。 因 为 IE 浏 
览 融 允许 对 col1 元 素 应 用 任何 CSS 属 性 ， 所 以 这 完全 有 可 能 。 其 他 的 浏览 大 (以 及 CSS 规 范本 刁 ) 
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不 允许 这 么 做 的 原因 则 是 一 个 很 长 、 很 曲折 ,而 且 坦 日 地 说 很 烦人 的 故事 了 。 在 这 一 点 上 IE 确 实 
做 了 一 件 大 家 盼望 的 好 事 。 

虽然 col 元 素 理 论 上 是 为 列 设置 样式 的 人 简便 方法 ,但 是 在 真实 世界 中 的 应 用 却 非 浓 有 限 。 如 
采 你 想 为 列 设置 样式 ， 束 必须 更 有 创造 性 。 通 党 的 办 法 就 是 对 整个 表格 的 所 有 单元 格 应 用 类 。 

<table> 

<tbody> 

< 七 工 > 

<td class="cl">Row cell 1«/td- 


T 
«td class="c2">Row 1 cell 2</td> 
«td class="c3">Row 1 cell 3«/td» 
1 
1 


<td class="c4">Row cell 4</td> 
<td class="c5">Row cell 5</td> 

</tr> 

<tr> 
<td class="c1">Row 2 cell 1</td> 
<td class="c2">Row 2 cell 2</td> 
<td class="c3">Row 2 cell 3</td> 
<td class="c4">Row 2 cell 4</td> 
<td class="c5">Row 1 cell 5</td> 

</tr> 

</tbody> 

</table> 


现在 , 如 果 你 想 让 某 个 特定 的 列 拥有 红色 背景 , 那么 只 需要 简单 地 为 那些 单元 格 的 类 书写 相 
应 的 CSS。 这 会 重建 图 6-$ 中 所 示 的 效果 。 


.cl, .c2, .c3, .c4 {background: red; width: 10em;} 

是 的 , PIC AIRES UAB IR ARTO. COC te V RT LOGER ES EROS Tw FE tb a A i FP 
CSS 属 性 ( 只 是 外 边 距 除 外 )。 那 么 如 果 你 想 使 那些 单元 格 的 文本 居中 并 变 成 斜体 的 话 ( 如 图 6-6 
所 示 )， 那 就 非常 侧 单 了 。 


Cl, .c2, .C3, .c4 {background: red; width: 10em; 


text-align: center; font-style: italic;) 


Row 1 cell 5 
图 6-6 ”使 用 类 对 “ 列 ” 应 用 样式 


记 住 ， 当 对 col1 元 素 应 用 样式 时 ， 这 种 改变 样式 的 简单 方法 在 非 正 浏览 硕 中 是 行 不 通 的 ， 
为 它 已 经 被 CSS 规 范 禁止 了 。 

如 果 你 想 通过 使 用 标记 的 方式 为 某 个 特定 的 列 添加 一 圈 边 框 的 话 ( 如 图 6-7 所 示 )， 那 么 还 需 
要 一 点 儿 工 作 。 你 只 需要 走 充 这 一 列 中 所 有 单元 格 的 侧 边 框 , 然后 为 这 一 列 顶 部 和 底部 单元 格 的 
顶部 和 的 部 分 别 设 置 边框 。 

td.c2 {border: 2px solid #000; border-width: 0 2px;} 

tr:first-child td.c2 {border-top-width: 2px;} 
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tr:last-child td.c2 {border-bottom-width: 2px; } 


Row 1 cell 5 
Row 1 cell 5 


图 6-7 通过 一 些 组 合 的 方法 为 “ 列 ” 设 置 边框 


如 果 由 于 使 用 这 些 选 择 带 需要 处 理 一 些 同 后 莱 容 问题 这 点 让 你 有 些 不 舒服 , 那么 就 可 以 多 使 
ne 行 以 及 最 后 一 行 设置 类 即 可 。 
<table> 


<tbody> 
<tr class="first"> 


</tr> 
«tr classs"last"- 


</tr> 
</tbody> 
</table> 


完成 这 些 之 后 ， 你 只 需要 对 CSS 做 一 点 儿 小 改动 使 之 可 以 使 用 新 的 钩子 。 


td.c2 (border: 2px solid $000; border-width: 0 2px;} 
tr.first td.c2 {border-top-width: 2px; } 
tr.last td.c2 {border-bottom-width: 2px; } 


让 我 们 再 往 回 退 一 点 儿 , 考虑 一 下 某 种 非常 规 的 对 列 应 用 样式 的 方法 ， 即 一 种 完全 不 需要 使 
用 类 的 方法 。 首 和 完 ， 把 标记 中 的 这 些 类 去 除 。 


<table> 
<tbody> 
<tr> 
<td>Row 1 cell 1</td> 


<td>Row 1 cell 5</td> 
</tr> 
<tr> 

<td>Row 2 cell 1</td> 


<td>Row 1 cell 5</td> 
</tr> 
</tbody> 
</table> 


现在 ， 你 将 如 何 对 第 二 列 应 用 样式 呢 ? 通过 :first-childq 和 相 邻 兄弟 选择 器 就 可 以 实现 。 


td:first-child + td (border: 2px solid #000; border-width: 0 2px;) 
tr:first-child td:first-child + td {border-top-width: 2px; } 
tr:last-child td:first-child + td {border-bottom-width: 2px; } 


通过 这 种 方式 ， 意 味 着 为 第 一 列 设置 样式 的 话 只 使 用 ka:first-child 即 可 (因为 你 已 经 选 
择 了 表格 中 所 有 作为 tr 第 一 个 子 元 素 的 单元 格 )， 任 何 跟 随 其 后 的 列 都 可 以 通过 添加 -1 个 + td 
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进行 选择 。 那 么 如 有 果 你 想 将 边框 移 到 第 四 列 的 话 〈 如 图 6-8 所 示 )， 需 要 建立 如 下 规则 : 
td:first-child + td +td + td (border: 2px solid #000; border-width: 0 2px;} 


tr:first-child td:first-child + td + td + td {border-top-width: 2px; } 
tr:last-child td:first-child + td + td + td {border-bottom-width: 2px; } 


Row 1 cell 5 
Row 1 cell 5 


图 6-8 ”使 用 子 选择 各 和 兄 第 选择 带 为 “ 列 ” 应 用 样式 


宋 拙 还 是 优雅 ? 我 想 ， 这 取决 于 你 的 审美 观 了 。 

使 用 这 种 方法 时 要 注意 的 一 点 是 ， 它 会 被 任何 跨越 多 列 的 表格 单元 格 破 坏 。 不 过 那样 的 话 ， 
如 于 你 已 经 让 单元 格 路 越 多 列 了 , 那么 可 能 根本 不 会 应 用 整 列 的 样式 了 《〈 好 吧 ,， 你 是 这 样 的 , 但 
大 多 数 人 可 能 不 是 )。 如果 需要 处 理 跨 列 的 单元 格 ， 那 么 使 用 类 的 方式 可 能 是 你 的 最 佳 选 择 。 


6.4 RAII 


许多 时 候 你 可 能 会 有 一 大 堆 具 有 地 理 相 关 性 的 数据 ， 比 如 各 州 的 销售 数据 、 分 地 区 的 投票 类 
据 等 。 这 些 数据 通常 最 好 以 表格 的 形式 进行 组 织 ， 但 这 并 不 意味 着 必须 用 同样 的 方式 来 展现 它 
们 。 为 什么 不 把 它 放 到 一 个 地 图 中 呢 ? 

为 了 实现 这 个 思路 ， 除 了 CSS 之 外 还 震 要 两 样 东 西 。 首 先 需 要 给 标记 添加 恰当 的 类 和 ID， 下 
面 是 一 个 美国 各 州 的 例子 及 其 相关 标记 。 


<table> 

<thead> 

<tr> 

<th scope="col">State</th> 
<th scope="col">Representatives</th> 
</tr> 

</thead> 

<tbody> 

<tr id="AL"> 

<th scope="row">AL</th> 
<td>7</td> 

</tr> 

<tr id="AK"> 

<th scope="row">AK</th> 
<td>1</td> 

</tr> 


«tr id="WY"> 

<th scope="row">WY</th> 
<td>1</td> 

</tr> 

</tbody> 

</table> 
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那么 现在 还 需要 连同 另外 47 行 "数据 放 在 地 图 上 ， 因 而 你 需要 的 第 二 样 东 西 就 是 : 一 个 地 图 
的 图 像 (如 图 6-9 所 示 )。 


图 6-9 ”地 图 


有 了 这 个 地 图 ， 你 就 可 以 开始 考虑 该 把 数据 放 在 哪里 了 。 在 这 种 情况 下 ， 你 需要 的 就 是 获取 
每 个 州 的 近似 中 点 。 我 的 做 法 就 是 在 类 似 Photoshop 这 样 的 图 像 编辑 器 中 打开 图 像 ， 然 后 用 它 来 
计算 出 每 个 点 的 X、7 玲 标 ， 再 把 这 些 坐标 写 到 一 个 列表 中 。 因 此 会 得 到 ， 


AL 692 448 
AK 210 560 
WY 330 300 


JRE Le VR BE IBS BET ER, ANE ER SES FFE TR] FEL) ta TEL E, 这 些 值 需 要 转换 为 相 


1000， 而 每 个 垂 二 度量 应 该 除 以 700， 那 么 就 会 得 到 : 


AL 69.2% 64% 
AK 21% 80% 
WY 33% 42.9% 


(D 美国 共有 50 个 州 ， 标 记 中 写 出 了 3 个 ， 故 还 需要 47 行 。 
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我 们 先 把 这 个 列表 放 在 一 边 ， 因 为 现在 要 开始 书写 CSS 使 它 运 作 起 来 。 首 和 完 ， 确保 地 图 可 以 
正确 展现 : 


table, table * {margin: 0; padding: 0; font: 1em/1 sans-serif; } 
table {display: block; width: 1000px; height: 700px; 
background: url(us-state-map.gif) no-repeat; } 


好 了 ， 地 图 已 经 束 位 了 ， 不 过 数据 全 部 都 在 左 侧 ， 并 没有 伸展 开 ( 如 图 6-10 所 示 ) 有 意思 
IE? 这 是 因为 所 有 的 表格 单元 格 仍然 午 以 表格 的 方式 悬挂 在 一 起 ， 而 table 元 素 本 身 的 行为 已 经 
不 再 像 通 币 的 表格 行为 了 。 它 现在 生成 了 一 个 块 级 框 ， 就 像 aiv 那 样 。 因 此 ，tapble 元 系 与 表格 
各 行 以 及 单元 格 等 之 间 的 布局 关联 已 经 被 打破 了 。 是 的 ， 确 实 是 这 样 的 。 


图 6-10 ”地 图 及 数据 


你 需要 把 所 有 的 数据 都 放 到 指定 的 位 置 上 。 第 一 步 就 是 获取 全 部 数据 来 生成 块 级 框 并 且 对 它 
们 全 部 进行 定位 ( 理论 上 ,给 它们 定位 就 会 使 它们 生成 块 级 框 ,不 过 我 言 欢 明确 地 声明 对 display 
属性 的 改变 ， 只 是 为 了 保险 )。 你 还 应 该 添加 一 个 临时 的 边框 ， 这 样 才能 看 到 事情 进展 如 何 (如 
图 6-11 所 示 )。 


tr, th, td {display: block;} 

tr {position: absolute; top: 0; left: 0; 
color: #527435; 

border: 1px dotted red;} 
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6-11 


OL 


第 一 步 ， 给 数据 定位 


WF. 它们 全 都 扒 在 了 地 图 的 左上 角 ,， 并 没有 在 各 目 恰 当 的 点 上 。 这 时 束 用 到 了 刚才 那个 百 分 
比 的 列表 了 。 每 个 水 平 的 百分比 都 会 变 成 1eft 的 值 ， 而 每 个 垂直 的 百分比 都 会 变 成 top 的 值 (如 
图 6-12 所 示 )。 

#AL (left: 69.2%; top: 64%; } 

#AK (left: 21$; top: 80%;} 


#WY {left: 33%; top: 42.5%;} 


CAI, DAE AW Y o 它们 没有 排列 整齐 的 原因 是 ， 每 个 州 的 中 点 〈 或 者 至 少 是 一 
些 合理 的 点 ) 都 是 在 你 写 下 列表 时 选择 的 。 这 些 值 作为 项 部 和 左 侧 的 仿 移 量 ， 用 来 将 每 个 定位 元 
系 的 左上 和 角 放 置 在 那些 选择 的 点 上 。 因 此 定位 的 tr 元 系 会 位 于 那些 点 的 瓜 部 的 右 侧 。 
对 于 所 有 那些 较 小 的 东北 部 的 各 州 , 它们 的 数据 相互 重 辣 了 ,不 过 那 


是 待 会 儿 要 处 理 的 事件 。 
解决 这 个 问题 的 最 简单 办 法 就 是 为 每 个 tr 指定 党 和 高 ,然后 把 它们 同上 和 问 左 拉 过 刚才 指定 
尺寸 的 一 半 距 离 。 下 面 是 一 个 小 实验 ( 如 图 6-13 所 示 ): 


tr {position: absolute; top: 0; 


left: 0; 
width: 2em; height: 2em; 
margin-left: -lem; margin-top: -1em; 
color: 4527435; 


border: 1px dotted red;} 


调整 每 个 数据 框 的 放置 位 置 
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PE. 看 看 这 些 吧 ! 这 些 数 据 已 经 差不多 都 在 你 想 要 的 位 置 上 了 。 这 里 当然 还 有 一 些 可 调整 的 
余地 ,例如 佛罗里达 的 框 貌似 往 下 了 一 点 , 不 过 它们 已 经 很 好 地 相对 摆 放 在 一 起 了 , 不 过 东北 地 
区 除外 。 文 本 似乎 还 有 些 对 齐 问 题 ， 那 么 让 我 们 来 清理 一 下 这 些 问题 以 及 其 他 的 一 些 问题 。 

tr {position: absolute; top: 0; left: 0; 

width: 2em; height: 2.2em; 
margin-left: -1em; margin-top: -1.1em; 
color: 45274357] 
tbody th, tbody td (text-align: center;) 
tbody th {font-weight: bold; border-bottom: 1px solid gray; margin-bottom: 0.1em;) 


图 6-14 比 刚才 更 好 了 ! 当然 ， 东 北 地 区 的 布局 仍然 过 于 混乱 。 


图 6-14 ”清理 数据 


实际 上 我 打算 让 它 保 持 这 个 样子 , 它 可 以 作为 了 解 为 何 把 数据 映射 到 表格 时 要 格外 小 心 的 完 
美 例子 。 FEN, 有 很 多 种 通过 CSS 组 解 这 种 问题 的 方法 ,比如 在 那些 较 小 的 州 中 隐藏 部 分 数据 框 ， 
当 鼠 标 悬 停 时 再 显示 出 来 。 一 个 更 好 的 主意 就 是 选取 一 个 每 个 州都 有 足够 空间 放置 数据 的 地 图 
(例如 ， 一 个 含有 东北 地 区 的 放大 特写 、 或 者 有 标注 线 指 回 较 小 州 的 地 图 ， 然 后 数据 就 可 以 放 在 
每 个 标注 线 的 末 闪 了 )， 我 把 这 个 想象 空间 留 给 你 。 

还 有 另外 一 件 需要 做 的 事 ， 它 比 现 有 的 使 用 scope 属 性 的 方式 更 能 提高 表格 的 可 访问 性 。 另 
一 个 好 处 在 于 , 还 有 其 他 一 些 需 要 放置 和 应 用 样式 的 元 素 。 这 个 表格 还 需要 一 个 摘要 (Summary ) 
和 一 个 表格 标题 (caption ). 


<table summary="A list of American states and the number of representatives 
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allocated to each in the United States House of Representatives, which is 
the lower chamber of the United States Congress."> 

<caption>U.S. Representatives, by State</caption> 
<thead> 


现在 你 可 以 使 用 caption 元 床 并 将 其 作为 地 图 的 标题 了 ( 如 图 6-15 所 示 )， 同 时 还 需要 关 挥 
thead 的 显示 ， 它 现在 正 挂 在 地 图 的 左上 角 ， 看 上 去 很 丑 。 

thead (display: none;) 

caption {position: absolute; 


top: 0; left: 0; right: 0; text-align: center; 
font: bold 200% sans-serif; } 


T => 


U.S. Representatives, by State 


图 6-15 ”使 用 表格 标题 并 将 其 作为 图 表 的 标题 


好 极 了 ! 束 这 样 ， 表格 的 数据 部 放 在 了 地 图 上 。 数 据 有 适当 的 结构 、 遍 度 的 可 访问 性 以 及 旧 
的 表格 无 法 提供 的 视觉 至 受 。 


6.5 ” 表 的 图 形 化 


AHR, 数据 表 本 里 适合 于 图 形 化 。 它 可 以 是 季度 利润 、 过 去 一 周 或 高 或 低 的 温度 ,或 者 一 
年 的 平均 降雨 量 等 ， 大 量 的 数据 集 都 可 以 被 图 形 化 。 

考虑 一 个 我 们 比较 熟悉 的 情景 , 这 里 是 一 组 描述 以 10 天 为 周期 的 网 站 点 击 量 和 页 面 浏览 量 的 
数据 。 
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<table summary="Server hits and pageviews for meyerweb.com over the period 1/10/10 to 


1/19/10 


QUAE 


«caption»Web traffic«/caption» 


«the 


ad» 

<tr> 
<th 
eth 
«th 

</tr> 


</thead> 


<tbo 


dy> 


<tr id=' 


<th 
<td 
</tr> 


<tr id=' 


<th 
<td 
</tr> 


<tr id=' 


<th 
<td 
</tr> 


<tr id=' 


<th 
<td 
</tr> 


<tr id=' 


<th 
<td 
</tr> 


<tr id=' 


<th 
<td 
</tr> 


<tr id=' 


<th 
<td 
</tr> 


<tr id=' 


<th 
<td 
</tr> 


<tr id=' 


<th 
<td 
</tr> 


«tr id=' 


<th 
<td 
</tr> 


</tbody> 


</table> 


scope="col">Day</th> 
scope="cal" 
scope="col" 


'day01"> 


scope="row">1/10/10</th> 
Glasse"Hnrts"-15L,308«/td» 


'day02"'» 


scope="row">1/10/11</th> 
Class="hits">138,687</td> 


'day03 "> 


scope="row">1/10/12</th> 
class="hits">106,563</td> 


'day04"> 


scope="row">1/10/13</th> 
class="hits">117,551</td> 


'day05"> 


scope="row">1/10/14</th> 
class="hits">251,969</td> 


'day06"> 


scope="row">1/10/15</th> 
class="hits">213,228</td> 


'day07"> 


scope="row">1/10/16</th> 
class="hits">186,099</td> 


'day08"> 


scope="row">1/10/17</th> 
class="hits">246,637</td> 


'day09"> 


scope="row">1/10/18</th> 
class="hits">210,124</td> 


'day10"> 


scope="row">1/10/19</th> 
class="hits">168,413</td> 


<td 


<td 


<td 


<td 


<td 


<td 


<td 


<td 


<td 


<td 


class="hits">Hits</th> 
class="views">Views</th> 


class="views">70,342</td> 


class="views">70,410</td> 


class="views">58,383</td> 


class="views">64,181</td> 


class="views">171,790</td> 


class="views">134,238</td> 


class="views">113,014</td> 


class="views">161,287</td> 


class="views">135,479</td> 


class="views">115,541</td> 
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在 训 览 融 中 泻 染 之 后 ， 原 始 的 数据 看 起 来 如 图 6-16 所 示 。 


Web traffic 
Date Hits Views 
1/10/10 151,308 70,342 
1/11/10 138,887 70,410 
1/12/10 106,563 58,383 
1/13/10 117,551 64,181 


1/14/10 251,969 171,790 
1/15/10 213,228 134,238 
1/16/10 186,099 113,014 
1/17/10 246,637 161,287 
1/18/10 210,124 135,479 
1/19/10 168,413 115,541 


图 6-16 原始 的 表格 


我 们 可 以 很 简单 地 把 这 个 表格 转换 成 图 表 , 只 需要 把 每 一 天 放 到 恰当 的 位 置 上 , 然后 伸展 表 
格 单元 格 到 所 需 的 高 度 ， 简 单 吧 ! 

好 吧 ， 或 许 它 没 那么 简单 ， 不 过 你 会 发 现 它 也 没 那么 复杂 。 首 移 要 设置 工作 区 域 : 

table, table * {outlines 1px dotted red;j 

table {display: block; position: relative; 


height: 300px; width: 600px; 
font: small sans-serif; } 


height 和 wiath 可 以 使 用 任何 度量 单位 ， 然 而 在 接 下 来 的 工作 中 ,像素 可 以 使 某 些 数学 问题 
更 容易 解释 。 不 过 请 放心 ， 你 要 做 的 任何 事 都 不 会 用 到 像 系 的 。 完 成 之 后 ， 你 就 可 以 随意 把 那些 
值 改 成 你 想 要 的 值 ， 而 且 仍然 可 以 保持 数据 的 图 形 化 。outline 的 那 条 规则 是 临时 的 ， 它 的 存在 
只 是 让 你 看 清 径 你 正在 做 什么 。 

现在 开始 为 表格 中 的 所 有 东西 进行 定位 。 


tr, th, td {display: block; position: absolute; } 
tbody tr {left: 0; bottom: 0; width: 10$; height: 100%; } 


所 有 tboqy 中 的 行 都 被 设置 为 10% 的 宽度 了 ， 因 为 你 希望 它们 肩 并 肩 排列 ， 而 现在 有 10 行 ， 
因此 100% (表格 的 全 部 宽度 ) 除 以 10 就 得 到 了 10。 然后 只 需 把 各 行 一 个 挨 着 一 个 排列 ( 如 图 6-17 
所 示 ): 

#dayO2 (left: 10$; 


#day03 (left: 20$; 
#day04 (left: 30$; 


wwe -一 
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#day05 (left: 40%;} 
#day06 (left: 50%; } 
#dayO7 (left: 60%; } 
#day08 (left: 70%;} 
#day09 (left: 80%; } 
#day10 (left: 90%; } 
tbody td bottom: 0 


‘Viteari0- 
traffic” ， : : i : 


图 6-17 ARIE TATE RERA 


这 是 个 有 点 儿 令 人 乏味 的 部 分 : 为 每 一 行 写 出 左 侧 的 偏 移 量 。 想象 一 下 整 月 都 在 干 这 个 的 情 
É! (当然 ， 这 就 是 为 什么 你 会 用 脚本 来 写 这 种 东西 而 不 是 手动 去 写 的 缘故 。 关 于 这 一 点 ， 稍 后 
我 们 会 详细 介绍 。) 

此 时 ， 该 让 每 个 条 形 恰当 地 “站 ”起 来 了 。 这 里 才 是 真正 令 人 壹 味 的 地 方 ， 因 为 需要 为 它们 
每 一 个 单独 计算 高 度 然后 再 指定 高 度 。 首 先 需 要 确定 最 高 的 值 ， 在 本 例 中 为 231 969。 然 后 选 一 
个 等 于 或 高 于 这 个 值 的 数值 作为 图 表 的 顶端 。 它 可 能 是 260 000, 275 000 或 者 甚至 是 300 000。 对 
于 这 个 例子 ， 我 们 将 使 用 260 000 这 个 值 。 

完成 这 些 之 后 , 下 一 步 就 是 用 每 个 值 除 以 刚才 那个 最 大 的 值 ， 从 而 得 到 一 个 百分比 值 。 那么 
对 于 第 一 行 ， 它 包含 了 数字 151 308 和 70 342， 则 对 应 的 百分比 值 应 为 58.2% 和 27.05%。 这 些 就 是 
即将 应 用 在 第 一 行 的 tg 元 素 上 的 高 度 值 。 类 似 地 ， 第 二 行 的 值 为 53.42% 和 27.08%。( 是 的 ， 手工 
完成 这 些 一 定 极为 痛苦 ,用 自动 化 的 脚本 可 能 更 好 一 些 。 关 于 这 一 点 ,本 章 后 续 部 分 将 会 讨论 到 。) 

#day01 td.hits fheight: 58.2%;} 

#day01 td.views (height: 27.05%; } 


#day02 td.hits fheight: 53.42%; } 
#day02 td.views (height: 27.08%; } 


对 布局 中 的 全 部 10 行 都 使 用 同样 的 方式 进行 处 理 ， 结 果 如 图 6-18 所 示 。 
好 了 , 已 经 有 点 儿 阶 梯 状 了 ， 不 过 仍然 很 难看 清 条 形 。 填 充 一 些 颜色 会 比较 管用 ( 如 图 6-19 
所 示 )。 


第 6 


XE 


190 X 


表 


格 
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.hits (background: #4444ED; color: 
.Views (background: #44ED44; } 


#FFF; } 


117,551. | : : 
6i | 513014 | 


70410 | 


SR 
gs 


图 6-18 ”设置 条 形 的 尺寸 


161,287| | 


这 个 简单 的 改变 可 以 使 条 形变 得 更 加 明显 。 事 实 上 ， 去 掉 点 线 的 轮廓 (红色 ) 后 就 可 以 得 到 


一 个 儿 乎 足够 理想 的 图 了 。 这 里 有 个 关于 thead 和 caption 元 素 的 很 大 问题 ， 它们 的 内 容 仍 


挂 在 左上 角 。 此 外 还 有 一 些小 问题 ， 比 如 图 左 侧 的 条 形 并 非 等 宽 ， 
了 th 的 内 容 。 


US 


IEN JUN 


mj Ae AY 1/14/1 ORY AI 8 R 


图 6-19 


添加 颜色 使 条 形 更 明显 


我 们 将 以 逆序 处 理 这 些 问 题 。 首 先 ， 拿 掉 轮 廓 《红色 ) 并 且 沿 着 整个 图 的 顶部 和 友 部 分 别 设 


置 一 条 细 边 框 。 


table, table * {outline: none;} 
table {display: block; position: 
height: 300px; width: 600px; 


relative; 


6.5 表 的 图 形 化 19] 


border: 1px solid #999; border-width: 1px 0; 


font: small sans-serif;) 
对 于 被 覆盖 的 日 期 ， 把 所 有 的 日 期 一 起 移 到 表格 的 上 方 【 如 图 6-20 所 示 )， 以 此 来 确保 它们 
NBA TE o 
tbody th (top: -1.33em;) 


Web 
traffic 251,969 246,637 


210,124 


117,551 


图 6-20 ”清理 表 头 的 单元 格 
现在 使 所 有 的 条 形 等 宽 ， 并 使 它们 在 其 包含 块 (track ) 中 居中 对 齐 。 


tbody td (bottom: 0; width: 90$; left: 53-3 


事实 上 , 文本 可 能 看 上 去 有 一 点 儿 错 位 ， 不 过 居中 对 齐 可 以 使 它 看 上 去 好 一 些 ( 如 图 6-21 所 
IR )。 如 采 你 想 让 大 部 分 内 容 都 居中 对 齐 的 话 ， 那 么 就 在 文档 中 更 局 的 点 进行 设置 。 


table {display: block; position: relative; 


height: 300px; width: 600px; 
border: 1px solid #999; border-width: 1px 0; 
font: small sans-serif; text-align: center;) 


1/40/10 1/1140 1/4210 143/10 1/440 145/10 1/16/10 31/470 1/8/10 1/1910 


Web 
traffic 251,969 246,637 


210,124 


117,551 


图 6-21 使 条 形 等 宽 
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WEE, H BHUZBERRZRJE PS SCANS ETA AR cas RRL, SHEE AA BIS P, 
但 是 没有 给 th 元 素 设 置 。 那么 可 以 改写 一 下 那 条 规则 , 同时 对 作为 tbodqy 后 代 的 tn 和 ta 元素 设置 
宽度 和 左 侧 俩 移 量 一 一 可 以 通过 把 tboqy td 这 条 规则 中 的 wiath: 90%; left: 5%; 移 到 它们 自 
己 的 一 条 规则 中 来 实现 。 


tbody th, tbody td. (width: 90%; left: 537} 
tbody td bottoms 0r] 
tbody th {top: -1.33em;} 


那么 还 剩 下 什么 呢 ? thead 和 caption， 它 们 仍然 乱 堆 在 左上 角 。 那 么 我 们 把 caption 放 到 
表格 的 下 方 ， 设 置 为 居中 和 粗 体 ， 就 像 这 样 : 


caption {position: absolute; bottom: -1.75em; width: 100%; 
text-align: center; font-weight: bold; } 


现在 把 thead 变 成 这 个 图 表 的 图 例 。 毕 苋 ， 你 需要 的 信息 已 经 都 在 那儿 了 。 

第 一 步 就 是 去 掉 thead 中 对 tr 和 th 元 素 的 定位 。 这 个 时 候 ， 由 于 有 tr，th，td 这 条 规则 ， 
因此 它们 是 被 绝对 定位 的 。 那 么 可 以 通过 明确 指定 默认 值 static 来 覆盖 那 条 规则 ， 这 基本 上 意 
味 着 “没有 定位 ”。 

thead * {position: static; padding: 0.25em;} 

另外 ， 你 也 可 以 调整 tr，th，tq 这 条 规则 的 选择 器 ， 把 它 改 成 tboqy tr, tbody th, tbody 
tdo 这 样 就 不 需要 移 除 对 theaq 后 代 元 素 的 定位 了 , 尽管 你 需要 书写 thead * (display: block; } 
fii oct HE TE IZ E. 

对 于 本 例 中 的 这 个 表格 ， 两 种 途径 都 能 达到 相同 的 效果 ( 如 图 6-22 所 示 )。 那 么 ， 完 成 之 后 
(完成 任何 一 种 方法 ) 就 该 定位 theaq 本 号 了 。 

thead {position: absolute; 


top: 50%; margin-top: -2.5em; 
left: 100%; margin-left: 2.5em;} 


14010 1/1110 1/2/10 113/10 1/410 1/15/10 1/16/10 1/17/10 1/810 1/19/10 


图 6-22 ”使 用 列 标题 并 将 其 作为 图 表 的 图 例 
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大 功 告 成 了 ! 

我 许诺 了 好 多 次 , 说 要 考虑 一 下 使 用 脚本 完成 一 些 操 作 过 程 ， 那么 现在 就 开始 吧 。 当 计算 图 
表 的 项 部 边界 ( 在 这 个 特定 的 例子 中 是 260 000 )， 更 别 说 是 计算 全 部 条 形 的 高 度 时 ， 很 明显 一 点 
儿 编 程 就 有 很 大 帮助 ， 这 可 以 通过 下 面 两 种 方法 实现 。 

第 一 种 方法 是 在 服务 融 端 进行 计算 。 在 这 种 场景 下 , 将 要 被 图 形 化 的 数据 是 从 数据 库 拉 取出 
来 的 ， 而 页 面 是 通过 某 种 模板 生成 的 。 这 种 情况 下 ,你 只 需要 把 计算 各 种 所 需 值 的 方法 内 建 在 模 
板 中 ， 也 可 能 内 建 在 它们 各 自 的 样式 表 中 。 

第 二 种 方法 是 写 一 些 JavaSceript 代 码 来 完成 这 个 繁重 的 任务 。 在 这 种 方法 中 ， 各 种 条 形 的 高 度 
不 会 跟随 图 其 他 部 分 的 样式 一 起 被 包含 在 样式 表 中 。 IBA, 一 旦 页 面 载 入 完成 ,JS 将 会 毅 历 表格 两 
次 , 一 次 用 来 收集 所 有 的 值 并 确定 其 中 的 最 大 值 ， 一 次 用 来 分 别 对 所 有 的 ta 动态 设置 百分比 高 度 。 


可 预见 的 未 来 


本 章 , 我 们 关注 那些 即将 到 来 的 东西 : 那些 可 以 立即 使 用 或 者 在 不 远 的 未 来 就 可 以 使 用 的 应 
用 样式 的 技术 。 从 对 HTML 5 元 素 应 用 样式 到 基于 显示 参数 重新 安排 布局 ， 从 狗 狂 的 选择 模式 到 
转换 元 系 布 局 ， 这 些 都 是 你 在 明天 、 下 个 月 或 者 明年 就 可 能 用 到 的 技术 。 尽 管 只 有 部 分 浏览 三 文 
持 ， 但 它们 都 是 web 设计 领域 的 前 沿 技术 。 

因此 , 一 定 要 关注 这 些 技术 哦 ! 这 里 有 些 网 站 可 以 帮助 你 确切 地 了 解 使 用 这 些 技术 所 需 的 相 
关 语 法 以 及 模式 。 

Q http://css3please.com/ 

L] http://css3generator.com/ 


口 http://www.westciv.com/tools/gradients/ 

Q http://gradients.glrzad.com/ 

此 外 , 848 — JavaScript? Pe n] E43) REED si] T S2 CSSBU STE, Eun] 8 TE/Win 5.5 
ES He Toe. AHA ESE TE PA N daz. 而 男 外 一 些 则 希望 更 广泛 地 文 持 几 
乎 所 有 已 知 的 浏览 带 。 如果 访 问 者 没 能 紧 跟 时 代 的 步伐 ,而 你 又 不 希望 他 们 错过 所 有 好 玩 的 地 方 ， 
那 这 些 就 非常 有 用 了 。 

Q http://css3pie.com/ 

Q http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ 

Q http://www.keithclark.co.uk/labs/1e-css3/ 

口 http:/code.google.com/pyie7-js/〈 实 际 上 它 远 比 这 个 URL 展 示 的 要 强大 得 多 。) 

DQ http://ecsstender.com/ 

还 有 一 些 作 为 主流 JavaScript 类 库 的 插件 存在 的 CSS 增 强 工 具 ， 比 如 jQuery 的 插件 。 如 果 你 使 
用 这 种 类 库 ,， 那么 一 定 要 好 好 看 看 已 经 有 什么 可 用 的 功能 。 再 一 次 提醒 ， 要 小 心 ! 尽管 这 些 扩 术 
很 强大 ， 而 且 可 以 为 页 面 增添 很 多 功能 ,但 还 是 需要 在 各 个 浏览 融 中 彻 诬 地 测试 它们 ， 以 确保 不 
会 在 一 些 老 旧 浏 览 硕 中 使 整个 页 面 不 可 该 。 


7.1 为 HTML5 应 用 样式 
为 HTML 5 应 用 样式 其 实 跟 为 HTML 4 应 用 样式 没什么 区 别 。 尽 管 有 一 大 堆 的 新 元 素 ， 但 是 
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它们 应 用 样式 与 对 任何 其 他 元 素 应 用 样式 基本 上 一 模 一 样 。 它 们 己任 何其 他 的 aiv、span、 二 
、 链 接 等 元 系 生 成 的 框 完全 相同 。 
截至 所 写本 文 之 时 ，HTML S 的 规范 仍然 还 在 制定 中 , 随 春 时 间 的 推移 这 些 可 能 会 略 有 变化 ， 
\ 过 下 面 的 声明 对 于 那些 不 是 十 分 确定 应 该 如 何 处 理 新 元 系 的 老 旧 浏览 耸 可 能 会 有 用 。 


article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, 
menu, nav, section, summary {display:block; } 
command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr {display: 


inline; } 

PRA HEATERS, RAR TANIERE: audio (音频 ) 和 video (视频 ) 元 
wh ae tnit. 是 块 级 ?还 是 行 级 ?这 全 都 取决 于 你 打算 如 何 使 

它们 。 总 之 ， 你 可 以 把 它们 放 到 最 有 意义 的 声明 中 。 

但 是 , 对 于 那 此 真 的 非常 非常 老 的 浏览 器 比如 IE6 ), 该 怎么 办 呢 ? 〈 注 意 我 说 的 是 “ 老 的 ”， 

不 是 “ 废 径 的 ”, 这 是 对 流行 文化 的 一 个 有 趣 旺 覆 , 浏 览 融 的 流行 程度 跟 它们 的 “年 龄 ” 
这 些 元 素 ， 你 — 点 儿 JavaScript 来 使 浏览 需 可 以 识别 它们 并 对 它们 应 用 样式 。 
有 上 段 很 漂亮 的 脚本 ， 人 参见 http: en com/downloads/html5.js， 它 可 以 目 动 强 制 老 版 本 aa IE 
e a 5 元 素 。 如 末 想 使 用 它们 并 且 对 它们 应 用 样式 ， 那 么 你 绝对 应 该 使 用 这 
一 脚本 。 

一 旦 准备 好 浏 览 套 ， 就 可 以 开始 编写 样式 了 。 记 住 ， 为 这 些 新 元 陛 应 用 样式 与 为 之 前 的 元 系 
应 用 样式 一 模 一 样 ( 如 图 7-1 所 示 ) 例如 : 


figure {float: left; border: 1px solid gray; padding: 0.25em; margin: 0 0 1.5em lem;} 
figcaption {text-align: center; font: italic 0.9em Georgia, "Times New Roman", Times, 


serif; } 


<figure> 
«img src-"splash.jpg" alt="A toddler's face is obscured by a rippled and 
dimpled wall of water thrown up by her hands slapping into the surface of 
the swimming pool in whose waters she sits."> 
<figcaption>SPLASH SPLASH SPLASH! !!</figcaption> 
</figure> 


SPLASH SPLASH SPLASH!!! 


图 7-1 应 用 样式 后 的 Eigure 元 素 以 及 图 标题 
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7.2 (& HTML 5 一 样 给 类 命名 


或 许 你 很 喜欢 HTML 5 中 的 新 语义 , 但 可 能 还 没准 备 好 为 站 点 全 部 采用 HTML5。 可 能 你 的 站 
点 用 户 大 部 分 使 用 较 老 的 浏览 絮 , 而 且 你 也 宁愿 坚持 去 了 解 HTML 4 或 者 XHTML 的 使 用 数量 。 那 
也 不 用 担心 ， 你 可 以 通过 备 受 推崇 的 class 属 性 将 两 个 世界 很 好 地 结合 起 来 。 

这 种 技术 已 由 Jon Tan 整 理 成 文档 并 记录 在 他 的 文 草 中 ， 文 草地 址 为 http:Vjontangerine.comy 
log/2008/03/preparing-for-html5-with-semantic-class-names。 基 本 思想 就 是 使 用 div 和 span 等 “ 老 派 ” 
元 素 ， 并 为 它们 添加 与 HTML 5 元 素 的 名 称 精确 匹配 的 类 名 ， 下 面 是 一 个 代码 示例 。 图 7-2 展 示 了 
这 个 例子 在 浏览 顶 中 的 泻 染 效 末 。 


.figure (float: left; border: 1px solid gray; padding: 0.25em; margin: 0 0 1.5em lem; } 
.figcaption (text-align: center; font: italic 0.9em Georgia, "Times New Roman", Times, 


serif; } 


<div class="Tigure"> 
«img src="spring.jpg" alt="A small child with twin pigtail braids, 
her back to the camera, swings away from the camera on a playground 
Swingset while the late afternoon sun peeks over the crossbar of 
the swingset."> 
<div class="figcaption">Swinging into spring.</div> 
</div> 


Swinging into spring. 


图 7-2 ”应 用 了 figure 和 figcaption 类 的 HTML 4 元 素 


如 有 果 你 把 这 个 样式 跟 7.1 市 的 样式 进行 对 比 ， 就 会 发 现 唯 一 的 不 同 之 处 就 是 fijgure 和 
figcaption 这 两 个 名 字 前 面 加 了 英文 句点 ， 因 而 它们 变 成 了 闫 名。 当然 ， 标 记 也 有 些 不 同 ， 不 
过 基本 结构 是 一 样 的 。 

这 种 方法 的 优点 就 是 ， 如 果 当 你 决定 将 站 点 转换 成 HTML 5 站 点 时 这 些 样 式 存在 ， 那 么 只 需 
用 HTML 5 元 系 符 代 原 来 涂 加 了 类 名 的 aiv 并 去 卸 关 选择 带 前 面 的 句点 ， 将 其 改 为 元 素 选 择 角 。 
就 是 这 样 ， 小 末 一 人 碟 儿 1 


7.3 ”媒体 查询 


这 完全 可 以 目 成 一 草 , 其 至 可 能 编撰 成 一 本 书 。 因 此 ,下 面 的 内 容 必然 只 是 简单 阐述 一 些 可 
能 性 。 你 一 定 要 跟 进 并 多 做 些 研 究 ， 因 为 在 很 多 方面 来 看 这 都 是 Web 设 计 的 未 来 。 

媒体 查询 ( media query ) 的 重点 就 在 于 设置 可 以 应 用 在 不 同 媒体 环境 的 、 分 条 件 的 样式 代码 
块 。 例 如 ,你 可 以 写 一 组 样式 用 于 纵向 显示 内 容 ,， 再 写 一 组 用 于 横向 显示 内 容 。 你 可 以 基于 显示 
的 位 深 改变 颜色 , 也 可 以 基于 显示 区 域 的 像素 密度 更 改 字体 , 甚至 可 以 依据 显示 区 域 的 可 用 宽度 
或 者 可 用 的 像 系 数量 重新 安排 页 面 的 布局 (如 图 7-3 所 示 )。 


7.3 
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000 Mozilla Firefox C 
Disable + Cookies » CSS * Forms * Images * Information v Miscellaneous ~ Outline * Resize ~ Tools + View Source * Options ™ S N N 
A 
Y 
three #two #one 
ConHugeCo has permanently We here at ConHugeCo believe we know that it is better to unleash e Lorem ipsum 
altered the theory of branding. magnetically than to utilize transparently. Quick: do you have a e dolor sit 
What do we e-enable? Anything front-end strategy for regulating unplanned-for e-markets? Our e amet consectetuer 
and everything, regardless of technology takes the best features of IIS and Python. The reporting e adipiscing elit 
obscureness! Your budget for factor is 1000/60/60/24/7/365. What do we revolutionize? Anything e sed diam 
morphing should be at least and everything, regardless of obscurity! Your budget for enhancing e nonummy nibh 
one-third of your budget for should be at least three times your budget for growing. What does e euismod tincidunt 
driving. We will raise our aptitude the term "customer-defined, B2B" really mean? We think that most e ut laoreet 
to mesh without depreciating our dot-com web sites use far too much XMLHttpRequest, and not e dolore magna 
capacity to orchestrate. Do you enough XSL. The metrics for collaborative, plug-and-play research e aliquam erat 
have a strategy to become world- and development reports are more well-understood if they are not 
class, clicks-and-mortar, robust, cross-media. Is it more important for something to be synergistic or 
60/24/7/365? Without to be six-sigma? Imagine a combination of J++ and HTML. Your 
functionalities, you will lack budget for repurposing should be at least one-third of your budget for 
implementation. What does it utilizing. 
really mean to synergize 
"strategically"? We will cultivate If all of this comes off as unimagined to you, that's because it is! 
ardens uer si um a ConHugeCo has revolutionized the abstraction of solutions. We will 
it's accurate! mesh the aptitude of metrics to seize. Without adequate interfaces, 
solutions are forced to become C2C2C. Our technology takes the 
best aspects of FOAF and Python. Think cyber-interactive. Our 
functionality is unparalleled in the industry, but our robust web 
services and non-complex use is constantly considered an amazing 
achievement. What does the term "robust" really mean? It sounds 
mixed-up, but it's true! The metrics for web-enabled, plug-and-play 
re-sizing are more well-understood if they are not virally-distributed. 
Do you have a game plan to become user-centric? If you seize 
vertically, you may have to e-enable intuitively. 
The systems factor can be summed up in one word: clicks- 
and-mortar. 
ConHugeCo has permanently altered the theory of branding. What 
do we e-enable? Anything and everything, regardless of 
obscureness! Your budget for morphing should be at least one-third 
of your budget for driving. We will raise our aptitude to mesh without [x 
depreciating our capacity to orchestrate. Do you have a strategy to $ 
i Arg stig i : inh qoibas 
3XÉ Done x ell; 


图 7-3 ”基本 的 三 栏 布 局 


那么 怎么 实现 呢 ? 考虑 一 些 用 于 三 栏 布 局 的 基本 样式 。 


#000; 
sans-serif; } 


body {background: #FFF; color: 
font: 


Gol {position: 


small Arial, 
relative; 


margin: 3em 1%; padding: 0.5em 1.5%; 
border: 1px solid #AAA; border-width: 1px 1px 0 1px; 
float: right; width: 20%;} 


#two {width: 
#footer {clear: 


40%; } 
both; } 
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它 或 许 已 经 很 好 了 (对 那些 要 求 很 低 的 人 来 说 ), 不 过 当 它 被 缩小 的 时 候 很 可 能 会 遇 到 问题 ， 
我 的 意思 是 指 当 显示 区 域 变 罕 的 时 候 。 那么 如 果 在 这 种 显示 条 件 下 , 把 它 神奇 地 变 为 两 列 布局 可 
不 可 以 呢 ? 

当然 可 以 。 首 先 ， 将 三 栏 布局 的 应 用 环境 限制 为 大 于 等 于 800 px 的 宽度 。 这 可 以 通过 分 别 将 
这 些 布局 块 放 到 它们 目 己 的 声明 中 来 实现 : 


body {background: #FFF; color: #000; 
font: small Arial, sans-serif; } 
.col {position: relative; 
margin: 3em 1%; padding: 0.5em 1.5%; 
border: 1px solid #AAA; border-width: 1px 1px 0 1px;) 
footer (clear: both; } 
.col {floats right; widths 2042} 
#two (width: 40%; } 


SRD Fes PAR LOU JE Me BE ELK : 


Qmedia all and (min-width: 800px) { 
.COl [floats right; width: 20834 
#two (width: 40%; } 


} 


它 的 意思 就 是 “这 个 大 括号 中 的 规则 将 应 用 在 显示 宽度 不 小 于 800 px 的 全 部 媒体 中 ”。 不 管 
是 什么 媒体 ， 只 要 其 显示 宽度 小 于 800 px， 代 码 块 中 的 规则 就 会 被 忽略 。 注 意 在 min-width 术 语 
和 值 外 面 的 括号 ， 它 在 任何 出 现 类 似 术 二 和 值 (它们 也 被 称 为 表达 式 ) 的 地 方 午 是 必需 的 。 

IERT, BRIEFED V BY at O HIR BB ASC Ge) F800 px 的 冤 度 ( 如 图 7-4 所 示 ), 
则 不 会 看 到 任何 变化 。 到 那 时 ， 各 栏 就 不 会 浮动 了 。 


eoo Mozilla Firefox = 


#two 


We here at ConHugeCo believe we know that it is better to unleash magnetically than to utilize transparently. Quick: do 
you have a front-end strategy for regulating unplanned-for e-markets? Our technology takes the best features of IIS and 
Python. The reporting factor is 1000/60/60/24/7/365. What do we revolutionize? Anything and everything, regardless of 
obscurity! Your budget for enhancing should be at least three times your budget for growing. What does the term 
"customer-defined, B2B" really mean? We think that most dot-com web sites use far too much XMLHttpRequest, and not 
iam = - dein metrics for collaborative, plug-and-play research and dev — fader pe are more well-understood if 
-media. Is it more important for something to be synergisti o be ma? Imagine a combination 
+ ^ Fandi HTML. Your budget for repurposing should be at least one-third pre hed budget = utilizi ety 


If all of this comes off as unimagined to you, that's because it is! 


ConHugeCo has revolutionized the abstraction of solutions. We will mesh the aptitude of metrics to seize. Without 
adequate interfaces, solutions are forced to become C2C2C. Our laedi takes the best aspects of FOAF and Python. 

hink cyber-interactive. Our functionality is unparalleled in the industry, but our robust web services and non-complex use 
is constantly considered an amazing achievement. What does e term "robust" really mean? It sounds mixed-up, but it's 
true! The metrics for — plug-and-play re-sizii "" are more well-understood if pide are not virally-di istributed. Do 
you have a game plan ecome user-centric? If you seize vertically, you may have to 


The systems factor can be summed up in one word: clicks-and-mortar. 


图 7-4 “小 于 800 px 时 的 情景 


此 时 你 能 做 的 加 是 万 外 再 写 一 个 可 以 应 用 在 较 罕 有 


7.3 


一 个 适用 于 500~800 px 的 两 栏 布局 ， 如 图 7-5 所 示 。 


@media all and 


最 后 ， 可 以 对 任何 显示 宽度 小 于 500 px 的 媒体 应 用 


.col {float: 
#two {float: 
#three {clear: 


@media all and 


} 


#one {text-align: 
#one li {display: 
padding: 
border-right: 
line-height: 
#one li:last-child {border-right: 
#three {display: 


| functionalities, you will 


(min-width: 


left; 
right; 
left; 


#one 


e Lorem ipsum 

e dolor sit 

e amet consectetuer 
* adipiscing elit 

e sed diam 

e nonummy nibh 

e euismod tincidunt 
e utlaoreet 

e dolore magna 

e aliquam erat 


#three 


ConHugeCo has 
permanently altered the 
theory of branding. What 
do we e-enable? 
Anything and everything, 
regardless of 
obscureness! Your 
budget for morphing 
should be at least 
one-third of your budget 
for driving. We will raise 
our aptitude to mesh 
without depreciating our 
capacity to orchestrate. 
Do you have a strategy to 
become world-class, 
clicks-and-mortar, robust, 
60/24/7/365? Without 


图 7-5 


(max-width: 


0 0.5em; 


1.65] 


none; } 


500px) 
width: 
width: 69%;} 
margin-top: 


inline; 


and 
20%; } 


(max-width: 799px) { 


0;} 


Mozilla Firefox 


#two 


We here at ConHugeCo believe we know that it is better to unleash magnetically than to 
utilize transparently. Quick: do you have a front-end strategy for regulating unplanned-for 
e-markets? Our technology takes the best features of IIS and Python. The reporting 
factor is 1000/60/60/24/7/365. What do we revolutionize? Anything and everything, 
regardless of obscurity! Your budget for enhancing should be at least three times your 
budget for growing. What does the term "customer-defined, B2B" really mean? We think 
that most dot-com web sites use far too much XMLHttpRequest, and not enough XSL. 
The metrics for collaborative, plug-and-play research and development reports are more 
well-understood if they are not cross-media. Is it more important for something to be 
synergistic or to be six-sigma? Imagine a combination of J++ and HTML. Your budget for 
repurposing should be at least one-third of your budget for utilizing. 


If all of this comes off as unimagined to you, that's because it is! 


ConHugeCo has revolutionized the abstraction of solutions. We will mesh the aptitude of 
metrics to seize. Without adequate interfaces, solutions are forced to become C2C2C. 
Our technology takes the best aspects of FOAF and Python. Think cyber-interactive. Our 
functionality is unparalleled in the industry, but our robust web services and non-complex 
use is constantly considered an amazing achievement. What does the term "robust" 
really mean? It sounds mixed-up, but it's true! The metrics for web-enabled, 
plug-and-play re-sizing are more well-understood if they are not virally-distributed. Do 
you have a game plan to become user-centric? If you seize vertically, you may have to 
e-enable intuitively. 


The systems factor can be summed up in one word: clicks-and-mortar. 


ConHugeCo has permanently altered the theory of branding. What do we e-enable? 
Anything and everything, regardless of obscureness! Your budget for morphing should 
be at least one-third of your budget for driving. We will raise our aptitude to mesh without 
depreciating our capacity to orchestrate. Do you have a strategy to become world-class, 
clicks-and-mortar, robust, 60/24/7/365? Without functionalities, you will lack 
implementation. What does it really mean to synergize "strategically"? We will cultivate 
the capacity of web services to reinvent. It sounds puzzling, but it's accurate! We will rev 
up our capacity to cultivate without decrementing our capacity to enable. 


Your budget for envisioneering should be at least one-tenth of your budget for upgrading. 


—Ó— is = — — a — e-commerce. I eee he e-services are 
[hi e 


在 500~800 px 宽度 中 显示 调整 后 的 布局 
一 些 单 栏 的 布局 样式 (如 图 7-6 所 示 )。 


499px) ( 
center; } 


list-style: none; 


lpx solid gray; 


0;} 
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条 件 下 的 媒体 查询 代码 块 。 在 此 假设 你 想 弄 


注意 在 所 有 的 这 些 查 询 中 , 布局 样式 的 定义 痢 是 跟 训 览 融 窗口 的 显示 区 域 相 关联 的 。 更 一 般 


地 ,它们 是 根据 任何 媒体 为 文档 演 染 所 提供 的 可 用 显示 区 域 的 大 小 来 定义 的 。 


一 个 打印 机 拥有 784 px 宽 的 可 用 显示 区 域 ， E pis 打印 出 两 栏 的 布局 。 


为 了 限制 各 栏 的 移动 只 对 屏幕 媒体 有 效 ， 


这 样 修改 一 下 查询 : 


AMARA, WR 
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eoo Mozilla Firefox = 


#one 


Lorem ipsum | dolor sit | amet consectetuer | adipiscing elit 
sed diam | nonummy nibh | euismod tincidunt | ut laoreet | 
dolore magna | aliquam erat 


#two 


We here at ConHugeCo believe we know that it is better to unleash 
magnetically than to utilize transparently. Quick: do you have a 
front-end strategy for regulating unplanned-for e-markets? Our 
technology takes the best features of IIS and Python. The reporting 
factor is 1000/60/60/24/7/365. What do we revolutionize? Anything and 
everything, regardless of obscurity! Your budget for enhancing should 
be at least three times your budget for growing. What does the term 
"customer-defined, B2B" really mean? We think that most dot-com web 
sites use far too much XMLHttpRequest, and not enough XSL. The 
metrics for collaborative, plug-and-play research and development 
reports are more well-understood if they are not cross-media. Is it more 
important for something to be synergistic or to be six-sigma? Imagine a 
combination of J++ and HTML. Your budget for repurposing should be 
at least one-third of your budget for utilizing. 


If all of this comes off as unimagined to you, that's because it is! 


ConHugeCo has revolutionized the abstraction of solutions. We will 
mesh the aptitude of metrics to seize. Without adequate interfaces, 
solutions are forced to become C2C2C. Our technology takes the best 
aspects of FOAF and Python. Think cyber-interactive. Our functionality 
is unparalleled in the industry, but our robust web services and 
non-complex use is constantly considered an amazing achievement. 
What does the term "robust" really mean? It sounds mixed-up, but it's 
true! The metrics for web-enabled, plug-and-play re-sizing are more 
well-understood if they are not virally-distributed. Do you have a game 


SLE LZ 


图 7-6 ”宽度 小 于 500 px 时 显示 的 单 栏 布局 


@media screen and (min-width: 800px) {...} 
Qmedia screen and (min-width: 500px) and (max-width: 799px) {...} 
Qmedia screen and (max-width: 499px) {...} 


(EE BC AIR LE — El Je n] TEASE AE AP, 比如 打印 或 者 电视 的 显示 上 ，, 该 怎么 办 
ME? 那么 加 上 这 些 媒 体 并 使 用 逗号 分 隔 即 可 ， 像 这 样 : 


Qmedia print, tv, screen and (min-width: 800px) {...} 
Qmedia screen and (min-width: 500px) and (max-width: 799px) {...} 
Qmedia screen and (max-width: 499px) {...} 


这 里 逗号 的 作用 类 似 于 逻辑 或 (OR )， 因 此 第 一 个 查询 可 以 理解 为 “在 打印 媒体 或 电视 媒体 
或 显示 区 域 大 于 等 于 800 px 的 屏幕 媒体 上 使 用 这 些 样式 ”。 

那么 ， 如 果 你 想 让 三 栏 布局 可 应 用 在 所 有 非 屏 幕 媒 体 上 呢 ? 在 第 一 个 查询 上 使 用 not 修 饰 符 
添加 一 个 语句 ， 声 明 “ 任 何不 是 屏幕 的 媒体 ”。 


Qmedia not screen, screen and (min-width: 800px) {...} 
Qmedia screen and (min-width: 500px) and (max-width: 799px) {...} 
Qmedia screen and (max-width: 499px) {...} 


像 前 面 一 样 , 逗号 使 两 个 语句 成 为 逻辑 或 的 关系 ,因此 可 以 理解 为 “任何 不 在 屏幕 上 的 媒体 
或 在 屏幕 上 且 显 示 区 域 大 于 等 于 800 px 的 媒体 ”。 
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这 里 还 有 个 only 修 饰 符 ， 所 以 一 个 查询 可 以 写成 像 only print 或 者 only screen and 
(color) 的 样子 。 截 至 撰写 本 文 之 时 ，not 和 only 是 媒体 查询 仪 有 的 两 个 修饰 符 。 

顺便 说 一 人 下， 前面 讲 过 的 查询 都 不 局 限于 使 用 像素 。 你 可 以 使 用 am、 厘米 或 者 任何 其 他 有 
效 的 长 度 单位 。 

表 7-1 展 示 了 所 有 可 以 用 来 构建 媒体 查询 的 查询 术语 。 注 意 ， 几 乎 所 有 这 些 术 语 都 接受 min 
和 max 前 缀 (例如 , device-height 同 时 有 min-device-height 和 max-device-height 两 个 “ 表 
杀 ”)， 只 有 orientation (方向 )、scan (扫描 ) 和 griqd (网 格 ) 例外 。 


表 7-1 基本 的 媒体 查询 术语 


术 语 fi R 
width 显示 区 域 的 宽度 (例如 浏览 器 窗口 宽度 ) 
height 显示 区 域 的 高 度 〈 例 如 训 览 器 窗口 高 度 ) 


device-width 
device-height 
orientation 
aspect-ratio 
device-aspect-ratio 


color 


color-index 


monochrome 
resolution 


scan 


grid 


设备 显示 区 域 的 宽度 (例如 桌面 显示 器 或 移动 设备 的 显示 区 域 ) 
设备 显示 区 域 的 高 度 

显示 的 方向 ， 有 两 个 值 ， 即 Portrait ( 纵 癌 ) 和 landscape (fI) 
显示 区 域 的 宽 高 比 ， 值 为 斜 线 分 割 的 两 个 整数 

设备 显示 的 宽 高 比 ， 值 为 斜 线 分 割 的 两 个 整数 

显示 设备 的 色彩 位 深 , 值 为 无 单位 的 整数 , 代表 位 深 。 如 果 没 有 指定 任何 值 ， 
则 会 匹配 任意 色彩 显示 

设备 的 “色彩 搜寻 列表 ” (color lookup table) 所 维护 的 色彩 数量 ， 值 为 无 单 
位 整数 

应 用 在 单 色 (或 灰 度 ) 设备 上 

设备 显示 的 分 辨 率 ， 值 以 dpi 或 dpcm 为 单位 

“电视 ”媒体 设备 的 扫描 类 型 , 值 为 progressive ( 逐 行 扫描 ) 和 interlace 
(隔行 扫描 ) 

设备 (例如 一 个 TTY 设备 ) 是 否 使 用 网 格 显示 ， 值 为 Oo 和 1 


7.4 为 特定 的 子 元 素 应 用 样式 


有 时 ， 你 可 能 需要 选择 菏 个 序列 中 的 第 二 、 第 三 、 第 五 、 第 八 或 者 第 十 三 个 元 系 。 最 明显 的 
例子 就 是 一 个 很 长 的 列表 中 的 列表 项 ,或 者 表格 中 的 多 行 ( 或 多 列 )， 不 过 这 里 的 情况 同 元 系 的 
组 合 一 样 多 。 

考虑 一 种 不 太 明 显 的 情况 ， 假 设 有 一 大 扒 引 用 目 他 人 的 句子 ， 你 布 望 把 它们 浮动 到 茶 种 
网 格 中 。 这 些 情况 下 通 肖 会 过 到 的 问题 束 是 ， 引 用 的 句子 的 不 同 长 度 可 能 打 散 网 格 ， 如 图 7-7 
BU o 


CD 原意 为 电 传 打字 机 (teletypewriter )， 现 多 指 文本 显示 设备 ， 如 Linux 终 端 等 。 
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Children are like wet 
cement. Whatever 
falls on them makes 
an impression. 

Dr. Haim Ginott 


The pursuit of truth 
and beauty is a sphere 
of activity in which we 
are permitted to 
remain children all 
OUT lives. 

Albert Einstein 


Whatever they grow 
up to be, they are still 
our children, and the 
one most important of 
all the things we can 
give to them is 
unconditional love. 
Rosaleen Dickson 


Children have never 
been very good at 
listening to their 
elders, but they have 
never failed to imitate 
them. 

James Arthur Baldwin 


Children will not 
remember you for the 
material things you 
provided but for the 
feeling that you 
cherished them. 
Richard L. Evans 


Too often we give 
children answers to 
remember rather than 
problems to solve. 
Roger Lewin 


Children are 
unpredictable. You 
never know what 
inconsistency they're 


eoo Mozilla Firefox =: 


The most effective 
kind of education is 
that a child should 
play amongst lovely 
things. 

Plato 


Let us put our minds 
together and see what 
life we can make for 
our children. 

Sitting Bull 


If you want children 
to keep their feet on 
the ground, put some 
responsibility on their 
shoulders. 

Abagail van Buren 


The most interesting 
information comes 
from children, for they 
tell all they know and 


going to catch you in then stop. 
next. Mark Twain 


Franklin P. Jones 
Your children are not 


图 7-7 AERC RR EP SIRE Fr AE B5 ap t 


这 里 的 一 个 经 典 解决 办 法 就 是 ， 每 隔 4 个 "aiv ( 因为 它 是 包含 每 个 引用 句子 的 元 素 ) 添加 一 
个 类 然后 清除 它 。 然 而 , 与 其 用 类 弄 乱 标记 ,为 何不 直接 选择 每 隔 4 个 的 aiv 呢 (如 图 7-8 所 示 ) ? 
.quotebox:nth-child(4n+1) {clear: left;j 
快速 解释 一 下 4n+1 的 部 分 。 
口 4n 意 味 着 每 个 可 以 用 公式 4 乘 x 来 描述 的 元 素 ， 而 是 指 序列 0,1,2,3,4…， 从 而 得 到 元 素 的 
序号 为 0,4,8,12,16… ( 类 似 地 ，3n 会 得 到 0,3,6,9,12… )。 
口 但 是 这 里 还 包含 零 级 的 元 素 ， 元 素 应 该 是 从 第 一 个 开始 的 〈 也 就 是 ， 元 系 序 号 为 1 )。 那 
么 你 需要 增添 +1 表 达 式 , 才能 选择 第 一 、 第 五 、 第 九 个 以 及 所 有 以 此 类 推 每 隔 4 个 的 元 素 。 
是 的 ， 你 的 理解 很 正确 : 那个 :nth-chila() 的 模式 是 从 0 开始 计算 的 ， 而 元 素 是 从 1 开始 计 
算 的 。 这 就 是 大 多 数 :nth-childq() 选 择 器 都 会 包含 +1 的 缘故 了 。 
使 用 这 种 选择 需 最 棒 的 地 方 就 是 , 如 果 不 想 选择 每 隔 4 个 的 元 素 ， 而 想 选 择 每 隔 3 个 的 那些 元 
系 〈 如 图 7-9 所 示 )， 那 么 修改 一 个 数字 即 可 。 


.quotebox:nth-child(3n+1) (clear: left;} 


(D 这 里 的 每 隔 4 个 是 指 取 第 1 个 、 第 5 个 、 第 9 个 ， 依 次 类 推 。 
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Children are like wet 
cement. Whatever 
falls on them makes 
an impression. 

Dr. Haim Ginott 


If you want children 
to keep their feet on 
the ground, put some 
responsibility on their 
shoulders. 

Abagail van Buren 


We find delight in the 


Whatever they grow 
up to be, they are still 
our children, and the 
one most important of 


The pursuit of truth 
and beauty is a sphere 
of activity in which we 
are permitted to 
remain children all 
our lives. 

Albert Einstein 


Children are 
unpredictable. You 
never know what 
inconsistency they're 
going to catch you in 
next. 

Franklin P. Jones 


Children will not 
remember you for the 
material things you 
provided but for the 
feeling that you 
cherished them. 
Richard L. Evans 


Children have never 
been very good at 
listening to their 
elders, but they have 
never failed to imitate 
them. 

James Arthur Baldwin 


The most effective 
kind of education is 
that a child should 
play amongst lovely 
things. 


Plato 


Your children are not 
your children. They 
are the sons and 
daughters of Life's 
longing for itself. They 
came through you but 
not from you and 
though they are with 
you yet they belong 
not to you. 

Kahlil Gibran 


Children are like wet 
cement. Whatever 
falls on them makes 
an impression. 

Dr. Haim Ginott 


The most effective 
kind of education is 
that a child should 
play amongst lovely 
things. 


Plato 


Children have never 
been very good at 
listening to their 
elders, but they have 
never failed to imitate 
them. 

James Arthur Baldwin 


Children are 
unpredictable. You 
never know what 
inconsistency they're 
going to catch you in 


Whatever they grow 
up to be, they are still 
our children, and the 
one most important of 
all the things we can 
give to them is 
unconditional love. 
Rosaleen Dickson 


The most interesting 
information comes 
from children, for they 
tell all they know and 
then stop. 


图 7-9 ”清除 每 阳 3 个 的 子 元 系 


Children will not 
remember you forthe 
material things you 
provided but for the 
feeling that you 
cherished them. 
Richard L. Evans 


The pursuit of truth 
and beauty is a sphere 
of activity in which we 
are permitted to 
remain children all 
our lives. 

Albert Einstein 


If you want children 
to keep their feet on 
the ground, put some 
responsibility on their 
shoulders. 
Abagail van Buren 


Your children are not 
your children. They 
are the sons and 
daughters of Life's 
longing for itself. They 


203 
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可 能 它 本 喘 看 上 去 已 经 非常 绝妙 了 , 不 过 它 其 实 还 能 做 得 更 好 。 如 果 你 把 这 些 方法 与 媒体 查 
询 结 合 起 来 ， 就 可 以 得 到 一 个 适应 性 很 好 的 网 格 状 布局 ( 见 图 7-10 )。 


@media all and (min-width: 75.5lem) { 


.quotebox:nth-child(5n+1) {clear: left; } 

} 

@media all and (min-width: 60.01em) and (max-width: 75em) { 
.quotebox:nth-child(4n+1) {clear: left; } 

} 

@media all and (min-width: 45.51em) and (max-width: 60em) { 
.quotebox:nth-child(3n+1) {clear: left;j 

} 

@media all and (min-width: 30.01em) and (max-width: 45.5em) { 
.quotebox:nth-child(2n+1) {clear: left; } 

} 

@media all and (max-width: 30em) { 


.quotebox (float: none; } 


} 


Children are like wet 
cement. Whatever 
falls on them makes 
an impression. 

Dr. Haim Ginott 


Children will not 
remember you for the 
material things you 
provided but for the 
feeling that you 
cherished them. 
Richard L. Evans 


Let us put our minds 
together and see what 
life we can make for 
our chil 

Sitting Bull 


Children have never 
been very good at 
listening to their 
elders, but they have 
never failed to imitate 


Whatever they grow 
up to be, they are still 
our children, and the 
one most important of 
all the things we can 
give to them is 
unconditional love. 
Rosaleen Dickson 


The most effective 
kind of education is 
that a child should 
play amongst lovely 
things. 


The pursuit of truth 
and beauty i is a sphere 
of activity in which we 


Too often we give 
children answers to 
remember rather than 
problems to solve. 


图 7-10” 自 适应 浮动 网 格 的 两 种 视图 


注 章 ， 这 组 查询 是 基于 以 em 为 度量 单位 的 浏览 絮 显 示 区 域 的 完 度 确定 
字号 以 及 浏览 絮 窗 口 改 变 时 具有 更 好 的 适应 性 。 
如 果 你 还 有 > —— 比如 表格 的 隔行 
人 性 化 的 蔡 代 方 荣 。 你 可 以 通 
J 


tr:nth-child (odd) 


。 这 使 得 该 布局 在 


选择 ， 那 么 这 里 有 一 些 比 2n+1 更 加 
winth-child(even) #l:nth-child (odd) paier 


(background: #EEF; } 
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7.5 ”为 特定 的 列 应 用 样式 


选取 表格 中 交 蔡 的 行 并 对 其 应 用 样式 并 非 难 事 , 但 如 果 是 列 呢 ? 实际 上 ,也 一 样 答 单 ， 因 为 
我 们 有 :nth-chi1d 和 :nth-of-type 选 择 器 。 

在 一 个 每 行 仅 由 数据 单元 格 (td 元 素 ) 组 成 的 简单 表格 中 ,你 可 以 像 这 样 进行 隔 列 选择 ( 如 
图 7-11 所 示 ): 


td:nth-child(odd) {background: #FED; } 


Jan Feb Mar Apr May Jun Jul 
$11,940 $12,348 $14,301 $17,208 $16,087 $16,052 $16,404 
$9,345 $9,834 $10,035 $9,672 $9,854 $9,405 $9,901 
$2,787 $3,123 $4,137 $3711 $3,092 $3,571 $2,811 
$1,657 $3,003 $2,882 $2,690 $1,892 $2,292 $1,939 
$8,947 $7,249 $8,102 $7,821 $7,654 $8,023 $8,197 
$9,034 $11,027 $11,793 $10,283 $9,995 $10,562 $10,200 
$10,633 $12,574 $12,834 $11,568 $12,130 $11,664 $11,243 
$15,856 $16,239 $16,057 $15,712 $16,017 $15,784 $16,001 
$8,245 $6,929 $6,498 $5,016 $6,909 $6,157 $5,047 
$4,896 $4,869 $4,383 $6,808 $4,555 $6,619 $4,677 
$83,340 $87,195 $91,022 $90,489 $88,185 $90,129 $86,420 


图 7-11 ”对 奇数 列 应 用 样式 C 男 见 彩 插图 7-11 ) 
还 想像 图 7-12 中 那样 填充 间隔 的 那些 列 吗 ”超级 简单! 


td:nth-child(odd) {background: #FED; } 
td:nth-child(even) (background: #DEF; } 


如 朱 想 每 隔 3 个 (如 网 7-13 所 示 )、4 个 、5 个 或 者 类 似 的 区 间 间 隔 进 行 选择 , 那么 就 要 用 到 n+1l 
模式 了 。 


td:nth-child(3n+1) (background: #EDF;} 


Jan Feb Mar Apr May Jun Jul 
$11,940 $12,348 $14,301 $17,208 $16,087 $16,052 $16,404 
$9,345 $9,834 $10,035 $9,672 $9,854 $9,405 $9,901 
$2,787 $3,123 $4,137 $3,711 $3,092 $3,571 $2,811 
$1,657 $3,003 $2,882 $2,690 $1,892 $2,292 $1,939 
$8,947 $7,249 $8,102 $7,821 $7,654 $8,023 $8,197 
$9,034 $11,027 $11,793 $10,283 $9,995 $10,562 $10,200 
$10,633 $12,574 $12,834 $11,568 $12,130 $11,664 $11,243 
$15,856 $16,239 $16,057 $15,712 $16,017 $15,784 $16,001 
$8,245 $6,929 $6,498 $5,016 $6,909 $6,157 $5,047 
$4,896 $4,869 $4,383 $6,808 $4,555 $6,619 $4,677 
$83,340 $87,195 $91,022 $90,489 $88,185 $90,129 $86,420 


图 7-12 ”同时 对 奇数 列 和 偶数 列 应 用 样式 〈 另 见 彩 插图 7-12 ) 
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Jan 
$11,940 
$9,345 
$2,787 
$1,657 
$8,947 
$9,034 
$10,633 
$15,856 
$8,245 
$4,896 
$83,340 


Jul 
$16,404 
$9,901 
$2,811 
$1,939 
$8,197 
$10,200 
$11,243 
$16,001 
$5,047 
$4,677 


Feb Mar Apr May Jun 

= $12,348 $14,301 $17,208 $16,087 $16,052 
$9,834 $10,035 $9,672 $9,854 $9,405 
$3,123 $4,137 $3,711 $3,092 $3,571 
$3,003 $2,882 $2,690 $1,892 $2292 
$7,249 $8,102 $7,821 $7,654 $8,023 
$11,027 $11,793 $10,283 $9,995 $10,562 
$12,574 $12,834 $11,568 $12,130 $11,664 
$16,239 $16,057 $15,712 $16,017 $15,784 
$6,929 $6,498 $5,016 $6,909 $6,157 
$4,869 $4,383 $6,808 $4,555 $6,619 
$87,195 $91,022 $90,489 $88,185 $90,129 


$86,420 


图 7-13 ”对 每 隔 3 个 的 数据 列 应 用 样式 ( 男 见 彩 插 图 7-13 ) 


这 些 相 对 来 说 部 很 简单 。 设 想 当 把 一 个 th 放 在 每 行 开 头 时 会 发 生 什 么 


什么 也 不 会 发 生 。 选 择 的 列 不 会 有 任何 变化 ,你 选择 的 仍然 是 tz 元 素 的 第 一 


FICK» 而 从 为 外 的 意义 上 讲 , 选择 的 列 变动 了 ,因为 不 再 是 第 一 


而 是 第 三 、 第 六 个 等 的 数据 列 。 由 th 元 系 组 成 的 第 一 


tg 元素 ( 如 图 7-14 所 示 )。 


列 根本 不 会 被 选择 ， 


、 第 四 、 


We? 从 革 种 意义 上 讲 ， 
第 四 、 第 坏人 不 等 的 
第 七 个 等 的 数据 列 了 ， 


#207-B35 
#207-B36 
#208-A07 
#208-A11 
#208-A12 
#208-A13 
#208-A23 
#209-C17 
#209-C55 
Total 


Jan 
$11,940 
$9,345 
$2,787 
$1,657 
$8,947 
$9,034 
$10,633 
$15,856 
$8,245 
$4,896 
$83,340 


Feb 
$12,348 
$9,834 
$3,123 
$3,003 
$7,249 
$11,027 
$12,574 
$16,239 
$6,929 
$4,869 
$87,195 


$14,301 
$10,035 
$4,137 
$2,882 
$8,102 
$11,793 
$12,834 
$16,057 
$6,498 
$4,383 
$91,022 


Apr 
$17,208 
$9,672 
$3,711 
$2,690 
$7,821 
$10,283 
$11,568 
$15,712 
$5,016 
$6,808 
$90,489 


$16,087 
$9,854 
$3,092 
$1,892 
$7,654 
$9,995 
$12,130 
$16,017 
$6,909 
$4,555 
$88,185 


Jun 
$16,052 
$9,405 
$3,571 
$2,292 
$8,023 
$10,562 
$11,664 
$15,784 
$6,157 
$6,619 
$90,129 


Jul 


#207-B34 ; r + ; 


$16,404 
$9,901 
$2,811 
$1,939 
$8,197 
$10,200 
$11,243 
$16,001 
$5,047 
$4,677 
$86,420 


JRA ae eas Rk F 


图 7-14 用 行 标题 扰乱 刚才 的 选择 模式 ( 男 见 彩 插图 7-14 ) 
为 了 修正 这 个 问题 ， 你 可 以 修改 :nth-chilaq 的 表达 式 (如 图 7-15$ 所 示 ): 


td:nth-child(3n+2) {background: #EDF; } 


#207-B35 
#207-B36 
#208-A07 
#208-All 
#208-A12 
#208-A13 
#208-A23 
#209-C17 
#209-C55 
Total 


Jan 
$11,940 
$9,345 
$2,787 
$1,657 
$8,947 
$9,034 
$10,633 
$15,856 
$8,245 
$4,896 
$83,340 


Feb 
$12,348 
$9,834 
$3,123 
$3,003 
$7,249 
$11,027 
$12,574 
$16,239 
$6,929 
$4,869 
$87,195 


Mar 
$14,301 
$10,035 
$4,137 
$2,882 
$8,102 
$11,793 
$12,834 
$16,057 
$6,498 
$4,383 
$91,022 


Apr 
$17,208 
$9,672 
$3,711 
$2,690 
$7,821 
$10,283 
$11,568 
$15,712 
$5,016 
$6,808 
$90,489 


May 
$16,087 
$9,854 
$3,092 
$1,892 
$7,654 
$9,995 
$12,130 
$16,017 
$6,909 
$4,555 
$88,185 


Jun 
$16,052 
$9,405 
$3,571 
$2,292 
$8,023 
$10,562 
$11,664 
$15,784 
$6,157 
$6,619 
$90,129 


Jul 


#207-B34 ^ 


$16,404 
$9,901 
$2,811 
$1,939 
$8,197 
$10,200 
$11,243 
$16,001 
$5,047 
$4,677 
$86,420 


图 7-15 ”通过 调整 选择 方程 式 恢复 选择 模式 ( 男 见 彩 插 图 7-15 ) 


7.6 RGB alpha 颜色 207 


另外 , 如 图 7-16 所 示 , 你 也 可 以 保留 原来 的 模式 , 然后 将 :nth-chil1dq 替 换 为 :nth-of-type: 


td:nth-of-type(3n+1) (background: #FDE;} 


Jan Feb Mar Apr May Jun Jul 
#207-B34 = $11,940 $12,348 $14,301 $17,208 $16,087 $16,052 $16,404 
#207-B35 $9,345 $9,834 $10,035 $9,672 $9,854 $9,405 $9,901 
#207-B36 $2,787 $3,123 $4,137 $3,711 $3,092 $3,571 $2,811 
#208-A07 $1,657 $3,003 $2,882 $2,690 $1,892 $2,292 $1,939 
#208-All $8,947 $7,249 $8,102 $7,821 $7,654 $8,023 $8,197 
#208-A12 $9,034 $11,027 $11,793 $10,283 $9,995 $10,562 $10,200 
#208-A13 $10,633 $12,574 $12,834 $11,568 $12,130 $11,664 $11,243 
#208-A23 $15,856 $16,239 $16,057 $15,712 $16,017 $15,784 $16,001 
#209-C17 $8,245 $6,929 $6,498 $5,016 $6,909 $6,157 $5,047 
#209-C55 $4,896 $4,869 $4,383 $6,808 $4,555 $6,619 $4,677 
Total $83,340 $87,195 $91,022 $90,489 $88,185 $90,129 $86,420 


图 7-16 通过 :nth-of-type 恢 复 选择 模式 ( 男 见 彩 插图 7-16 ) 


这 之 所 以 会 起 作用 , 是 因为 它 选择 了 与 其 他 元 素 共 享 同 一 个 父 元 素 的 每 个 指定 类 型 ( 本 例 中 
为 tg 元 素 ) 的 元 素 。 你 可 以 把 它 想象 成 一 个 :nth-chil1dq 选 择 器 , 它 可 以 跳 过 任何 没有 在 :nth-chila 
选择 硕 中 命名 的 元 素 。 


7.6 RGB alpha 颜色 


颜色 值 可 能 是 所 有 CSS 中 最 为 人 熟知 的 了 ,有些 人 其 至 可 以 根据 颜色 的 十 六 进 制 值 估 测 该 颜 
色 的 效果 ( 用 #E07713 试 试看 ) SMR EN rab () 表 示 法 那么 名 用 , 但 它们 确实 十 分 受 欢迎 。 

在 CSS 3 中 ，rgb () 表示 法 被 并 和 人 rgba 0 表示 法 了 。 值 中 的 a 代表 alpha， 即 alpha 通 道 透 明度 。 
因此 你 可 以 做 出 不 完全 透明 的 颜色 ( 见 图 7-17 所 示 )。 


.boxl {lbackground: rgb(255,255,255);} 
.box2 {background: rgba(255,255,255,0.5);} 


在 RGBA 中 也 可 以 使 用 百分比 形式 的 RGB 颜色 值 : 


.boxl (background: rgb(100%,100%,100%) ; } 
.box2 (background: rgba(100%,100%,100%,0.5);} 


alpha 值 始终 以 一 个 在 0 和 1 闭 区 间 内 的 数值 来 表示 ， 其 中 0 意味 着 “完全 透明 ””， 而 1 意味 着 
“完全 不 透明 "”。 因 此 半 不 透明 (half-opaque ) 是 0.3， 也 即 半 透 明度 (half-transparent ) 70.5. H 
于 历史 原因 ， 这 里 不 能 使 用 百分比 值 ， 至 于 具体 原因 因为 过 于 混乱 就 不 便 在 此 详 述 了 。 

如 末 提 供 一 个 在 0 和 1 闭 区 间 之 外 的 数值 , 它 就 会 (规范 中 说 的 ) 被 “钳制 ”在 允许 的 范围 内 。 
因此 ， 如 采 指 定 一 个 4.2 的 alpha 信 ,浏览 硕 就 会 当成 你 写 的 是 1。 同 时 ， 当 alpha 信 为 0 时 也 不 确定 
会 发 生 什么 情况 。 由 于 颜色 是 完全 透明 的 ， 那 会 发 生 什 么 呢 ， 看 不 见 的 文本 ?你 能 选择 它 吗 ? 


(D 请 注意 : Opacity 的 原意 为 “不 透明 度 ”"， 但 中 文中 有 时 也 译 为 “透明 度 ”"， 因 此 很 容易 混淆 。 
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如 来 是 用 在 链接 上 的 话 , 那 链 接 可 以 单 击 吗 ? 这 些 神 是 没有 确切 答案 的 有 趣 问题 , 所 以 要 小 心 一 
点 儿 。 


图 7-17 ”不 透明 和 半 透 明 RGB 硼 景 的 元 素 框 


RGBA 颜 色 可 以 用 在 任何 能 够 接受 颜色 值 的 属性 上 ， 壁 如 color (字体 颜色 ) 和 
background-color( 背景 颜色 ) 为 了 兼容 一 些 较 老 的 浏览 希 , 在 alpha 颜 色 前 面 增添 一 个 非 alpha 
颜色 是 个 比较 明智 的 选择 ， 形 式 如 下 : 

{color: #000; color: rgba(0,0,0,0.75);) 

BEE AD ai AT WA Bl —-“ME IF AA fey Ab “MEL, 然后 它们 会 看 到 第 二 个 值 , 但 由 
于 它们 不 知道 如 何 处 理 这 个 值 , AUK ATE ANS. RETR, BD ROE atl S BUE f 
文本 。 另 一 方面 ， 两 个 值 都 可 以 被 现代 浏览 需 识 别 , 不 过 由 于 层 闭 的 缘故 ,第 二 个 值 会 覆盖 第 一 
个 值 。 

注意 ，RGBA 颜 色 没 有 十 六 进 制 值 。 因 此 ， 你 不 能 指望 通过 写 个 #00000080 得 到 半 透 明 的 
黑色 。 


7.7 HSL 颜色 和 HSL alpha 颜色 


HSLA 值 与 RGBA 值 非常 相似 ， 还 有 一 种 值 与 它 更 相似 ,就 是 HSL 颜 色 。 它 们 是 CSS 3 中 新 引 
入 的 ， 而 且 对 于 很 多 设计 师 来 说 将 是 一 个 很 好 的 补充 。 


7.7 HSL Ée HSL alpha MB 209 


卫 


HSL 表 示 Hue-Saturation-Lightness， 即 色调 -饱和 度 - 明 度 。 即 使 不 知道 这 个 名 字 ， 可 能 你 也 
在 某 个 颜色 拾取 震中 使 用 过 HSL 颜 色 ， 如 图 7-18 所 示 。 


H | 
图 7-18 HSL 颜 色 拾 取 需 〈 画 见 彩 插图 7-18 ) 
图 7-19 展 示 了 一 些 颜 色 表 ， 可 以 让 你 大 致 了 解 HSL 颜 色 的 各 部 分 是 如 何 一 起 工作 的 。 


Hue Hue 
0 40 80 120 160 200 240 280 320 360 0 40 80 120 160 200 240 280 320 360 


Saturation = 100% Lightness = 50% 


Saturation 


100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0% 


图 7-19 ”各 种 HSL 颜 色 表 ( 男 见 彩 插 图 7-19 ) 
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色调 是 用 无 单位 的 数值 表示 的 ,对 应 看 色 盘 中 的 色调 角度 。 饱 和 度 和 明度 部 是 百分比 ,而 alpha 
{FL ( 跟 RGBA 一 样 ) 为 一 个 在 0 和 1 闭 区 间 内 的 数值 。 在 实际 应 用 中 ， 你 可 以 在 任何 能 接受 颜色 值 
的 地 方 使 用 HSL 颜 色 。 考 虑 下 面 的 规则 ， 它 可 以 创建 跟 图 7-17 相 同 的 效果 ( 如 图 7-20 所 示 )。 


.boxl {lbackground: hsl(0,0$,1005$):;]! 
.box2 (background: hsla(0,0$,100$,0.5);) 


eoo Mozilla Firefox t3 


图 7-20 ”不 透明 和 HSL 透 明 背 景 的 元 素 框 


你 可 以 使 用 常规 的 RGB 值 对 老式 浏览 带 做 些 回 退 ， 然 而 先 指定 RGB 颜 色 ， 人 然后 再 指定 HSL 
颜色 ， 相 对 于 把 HSL 放 在 第 一 位 来 次 会 失色 不 少 。HSL 可 以 让 你 完全 放 径 RGB 颜色 。 


7.8 ”阴影 样式 


WW, BAe! 还 记得 阴影 吗 ? 在 20 世 纪 90 年 代 中 期 ， 几 乎 啥 都 有 阴影 。 当 然 ， 遥 想 当 年 阴影 都 
是 通过 图 像 和 表格 构建 的 ， 其 至 比 通 常 的 方法 更 加 了 迁 回 曲折 。 现 在 你 可 以 通过 一 些 非常 简单 的 
CSS 重 新 体验 一 下 那个 辉煌 的 时 代 了 。 

实际 上 有 两 个 可 用 的 属性 : text-shadow 和 box-shadow。 先 说 第 一 个 ， 以 下 CSS 的 结果 如 
图 7-21 所 示 。 
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Running, Between, the.Shadows. 


图 7-21 ”为 标题 设置 阴影 


hi {text-shadow: gray 0.33em 0.25em 0.1em;) 

第 一 个 长 度 (0.33em) (RACH, PA Co.25em) {UE eR 
糊 半 径 ,， 它 代表 了 阴影 被 模糊 的 程度 。 这 些 值 可 以 使 用 任何 长 度 单 位 ， 因 此 如 果 你 想 用 像素 指定 
所 有 的 阴影 侦 移 量 和 模糊 程度 ,那么 尽管 去 做 好 了 。 和 模糊 程度 不 能 是 负 值 , 但 是 偶 移 量 可 以 : fü 
的 水 平 仿 移 量 会 将 阴影 推 癌 左 侧 ， 而 负 的 垂 生 侦 移 量 会 把 阴影 同上 拉 。 

如 图 7-22 所 示 ， 你 甚至 可 以 设置 多 个 阴影 ! 当然 ， 该 不 该 这 人 么 做 却 是 见仁见智 的 事情 。 


hi {text-shadow: gray 0.33em 0.25em O.1em, -10px 4px 7px blue; } 


LILZZJ 


图 7-22 ”拥有 多 个 阴影 的 标题 


注意 ， 阴 影 的 颜色 值 可 以 放 在 所 有 长 度 之 前 ， 也 可 以 放 在 它们 之 后 ,这 要 看 你 的 豆 好 了 。 同 
时 还 有 要 注意 ，CSS 3 规范 里 说 第 一 个 阴影 是 “在 上 面 ” 的 ， 即 最 接近 你 的 。 从 你 观看 页 面 的 视角 
来 看 , 后 面 的 阴影 会 依次 地 按照 远离 你 的 顺序 放置 。 因此 , 灰色 的 阴影 被 放 在 了 蓝 色 的 阴影 上 面 。 

现在 为 框 设 置 阴影 (如 图 7-23 所 示 )。 几乎 如 出 一 狼 ， 只 是 属性 名 不 同 而 已 。 


hi {box-shadow: gray 0.33em 0.25em 0.25em; } 


Running Between the Shadows | 
图 7-23 Ail oc EC LIS 


虽然 这 个 一 级 标题 (hl ) 没有 明显 的 框 ， 还 是 生成 了 阴影 。 同 时 ， 阴 影 也 仅 在 元 系 的 外 部 绘 
制 , 这 意味 着 你 无 法 看 到 在 元 素 后 面 /下 面 的 阴影 , 即使 元 素 拥有 透明 ( 或 者 RGBA 颜 色 的 半 透 明 ) 
的 育 景 。 阴 影 上 只 能 绘制 在 边框 边缘 之 外 , 因此 为 任何 设置 了 阴影 的 元 系 框 设置 一 个 边框 或 者 一 个 
可 见 的 背景 〈 或 者 两 者 同时 设置 ) 可 能 会 比较 好 。 

如 图 7-24 所 示 ， 你 也 可 以 设置 多 个 框 阴影 ， 就 像 添 加 文本 阴影 一 样 。 


hi {box-shadow: gray 0.33em 0.25em 0.25em, -10px 2px 6px blue; } 


[Running Between the Shadows | 


图 7-24 ”标题 的 元 系 框 上 的 多 个 阴影 
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这 里 我 不 得 不 承认 一 个 小 诺言 : 前 面 的 例子 古 在 理想 情况 下 的 效果 。 截至 撰写 本 文 之 时 , T 
们 实际 上 无 法 在 所 有 浏览 带 中 恨 好 工作 。 FKE, 这 些 插图 是 使 用 跟 上 面 展示 的 文本 不 同 的 语法 
做 出 来 的 。 截 至 2010 年 年 中 ， 寿 想 使 单个 阴影 的 例子 正 背 工作， 实际 上 需要 这 样 写 : 


h1 {-moz-box-shadow: gray 0.33em 0.25em 0.25em; 
-webkit-box-shadow: gray 0.33em 0.25em 0.25em; 
box-shadow: gray 0.33em 0.25em 0.25em;j 


这 会 兼容 稚 至 2010 年 年 中 时 的 所 有 现代 浏览 希 。 随 着 时 间 的 推移 ， 属 性 的 这 些 前 缀 〈 -moz- 
和 -webkit- ) 会 慢 慢 消 失 , 那 时 就 可 以 只 使 用 单独 的 box-shadqow 声 明了 。 有 具体 什么 时 候 能 实现 
WE? 我 想 还 是 取决 于 你 的 设计 、 站 点 的 访问 者 ， 还 有 你 目 己 的 舒适 感 了 。 

如 果 你 想 在 较 老 版 本 的 下 浏览 锅 中 也 为 元 素 框 呈现 阴影 的 话 ， 那 么 需要 添加 相 专 属 的 阴影 滤 
镜 。 详 见 http:/robertnyman.comy/2010/03/16/drop-shadow-with-css-for-all-web-browsers/。 


T. 9 多 背景 


CSS 3 中 真正 时 瞩 的 东西 之 一 ， 就 是 它 对 于 给 定 元 系 支 持 多 个 背景 图 像 。 如 果 曾 经 舱 套 过 多 
ien 只 是 为 了 做 出 一 堆 缘 景 ,， 那么 本 市 正 是 为 你 准备 的 。 
组 简单 的 样式 和 标记 为 例 ， 我 们 来 展示 一 段 引 文 ， 结 果 如 图 7-25 所 示 。 


body (background: #COFFEE; font: lem Georgia, serif; padding: lem 5%;} 

.quotebox (font-size: 195%; padding: 80px 80px 40px; width: 16em; margin: 2em auto; 
border: 2px solid #8D7961; background: #FFF; } 

.quotebox span {font-style: italic; font-size: smaller; display: block; margin-top: 
0.5em; text-align: right;j 


«div class="quotebox"> 

One&#8217;s mind has a way of making itself up in the background, and it suddenly 
becomes clear what one means to do. 

<span>&#8212;Arthur Christopher Benson</span> 

</div> 


One’s mind has a way of making 
itself up in the background, and it 


suddenly becomes clear what one 
means to do. 


—Arthur Christopher Benson 


图 7-25 ”设置 引文 框 


现在 ,添加 一 个 单独 的 背景 图 像 ( 如 图 7-26 所 示 ) 没有 什么 难度 ， 每 个 人 都 这 样 做 过 无 数 
RT. 


.quotebox (background: url(bg01.png) top left no-repeat; background-color: #FFF; } 
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One’s mind has a way of making 
itself up in the background, and it 
suddenly becomes clear what one 
means to do. 

—Arthur Christopher Benson 


图 7-26 ”添加 单独 的 背景 


但 是 如 果 想 让 每 个 角 都 显示 1/4 的 轮子 呢 ( 如 图 7.27 所 示 ) ? 显然 ， 你 需要 在 quotebox 这 个 
div 中 骸 僚 一 堆 dqiv。 有 了 CSS 3， 只 和 需 将 它们 添加 到 pbackground (As ) 声明 中 。 


.quotebox (background: 
url(bg01.png) top left no-repeat, 
url(bg02.png) top right no-repeat; 
background-color: #FFF; } 


One’s mind has a way of making 
itself up in the background, and it 
suddenly becomes clear what one 
means to do. 

—Arthur Christopher Benson 


图 7-27 ”对 同一 元 素 应 用 2 个 背景 


以 逗号 分 隔 每 个 background 值 来 获得 多 个 背景 ( 如 图 7-28 所 示 )。 


.quotebox (background: 
url(bg01.png) top left no-repeat, 
url(bg02.png) top right no-repeat, 
url(bg03.png) bottom right no-repeat, 
url(bg04.png) bottom left no-repeat; 
background-color: #FFF; } 


One’s mind has a way of making 
itself up in the background, and it 


suddenly becomes clear what one 
means to do. 
—Arthur Christopher Benson gë 


7-28 ”对 同一 元 素 应 用 4 个 背景 
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这 个 效果 跟 应 用 一 堆 航 侄 giv 的 效 末 极其 相似 ， 只 不 过 它 是 用 CSS 3 实现 的 ， 你 不 需要 再 纠 
mi To 
这 种 相似 性 也 存在 于 组 合 背 景 的 方式 中 。 PRAT BETES R Ebackground-colorF# HA AJh E 
出 来 了 , 目的 就 是 为 了 在 所 有 图 像 下 面 能 有 个 纯 日 色 的 背景 ,但 是 , 如 果 你 想 把 它 放 到 background 
声明 中 呢 ? 把 它 放 在 哪儿 ? 和 毕 葛 ,每 一 个 逗号 分 隔 的 值守 是 在 设置 它 目 己 的 育 景 。 如 东 把 颜色 放 
错 了 地 方 ， 那 么 就 可 能 会 有 一 个 或 多 个 图 像 补 相应 颜色 和 窗 兹 。 
事实 证 明 ， 答 案 就 是 放 在 最 后 一 个 值 中 。 
.quotebox (background: 
url (bg01.png) top left no-repeat, 
url(bg02.png) top right no-repeat, 


url(bg03.png) bottom right no-repeat, 
#FFF url(bg04.png) bottom left no-repeat; } 


这 是 因为 多 育 景 的 应 用 顺序 是 从 “最 高 ”到 “最 低 ” 的 ， 即 以 你 观看 页 面 的 视角 来 看 ， 是 从 
最 徘 近 你 的 到 离 你 最 远 的 顺序 应 用 。 如 果 你 把 闫 色 放 到 第 一 个 至 景 上 , 它 束 会 位 于 其 他 背景 的 “上 


这 也 意味 春 ， 如 琳 你 想 让 东 种 图 案 背 景 在 所 有 背景 的 最 后 方 ( 如 图 7-29 所 示 )， 那 么 就 需要 
把 它 放 在 最 后 一 个 并 且 确 保 把 任何 背景 频 色 的 值 也 移 到 这 个 值 中 。 


.quotebox {background: 
url(bg01.png) top left no-repeat, 
url (bg02.png) top right no-repeat, 
url (bg03.png) bottom right no-repeat, 
url (bg04.png) bottom left no-repeat, 
#FFF url (bgparch.png) center repeat; } 


One’s mind has a way of making 
itself up in the background, and it 


suddenly becomes clear what one 
means to do. 
—Arthur Christopher Benson 


图 7-29 ”1 个 元 素 ，5 个 背景 


由 于 可 能 引入 的 复杂 性 , 我 比较 喜欢 把 任何 先 认 的 育 景 颜色 放 到 它们 目 己 的 声明 中 ,就 像 之 
前 展示 的 那样。 因此 ， 我 会 把 前 面 的 样式 与 成 这 梓 : 


.quotebox (background: 
url(bg01.png) top left no-repeat, 
url(bg02.png) top right no-repeat, 
url(bg03.png) bottom right no-repeat, 
url(bg04.png) bottom left no-repeat, 
url(bgparch.png) center repeat; 
background-color: #FFF; } 
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当 使 用 分 隔 的 属性 时 , 把 颜色 放 到 所 有 图 像 的 后 面 , 这 样 在 重新 调整 图 像 的 顺序 或 者 增 洪 新 
图 像 时 就 不 用 再 把 它们 挪 来 挪 去 了 了。 
你 也 可 以 用 逗号 分 隔 其 他 的 背景 属性 ， 如 backgrounaq-image。 事 实 上 ， 前 面 的 样式 还 有 另 
写法 : 
.quotebox { 
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat; 
background-image: url(bg01.png), url(bg02.png), url(bg03.png), url(bg04.png), 


url (bgparch.png) ; 
background-position: top left, top right, bottom right, bottom left, center; 


background-color: #FFF; } 

ANTALIS AR SK, TAPERS IR. ORM SUA BE ARE AR vx. IMA EAL Pesce, 但 
Jf AEE MURINE AN A 〈 结 采 如 图 7-30 所 示 )， 那 么 就 可 以 人 简化 一 下 第 一 个 
—L 
声明 了 : 

.quotebox { 

background-repeat: no-repeat; 
background-image: url(bgO0l.png), url(bg02.png), url(bg03.png), url(bg04.png); 


background-position: top left, top right, bottom right, bottom left; 
background-color: #FFF; } 


One’s mind has a way of making 
itself up in the background, and it 


suddenly becomes clear what one 
means to do. 


—Arthur Christopher Benson 


图 7-30 “类似 的 背景 ， 蔡 代 的 语法 


给 定 这 些 样式 后 ， 就 不 会 有 任何 背景 被 平 铺 了 ,因为 那个 no-repeat 会 应 用 到 元 素 的 所 有 背 
景 上 。 你 需要 写 出 所 有 和 平 铺 值 的 唯一 理由 就 是 ， 前 4 个 是 一 个 值 ， 而 第 五 个 是 另外 一 个 值 。 
如 有 果 你 写 出 两 个 background-repeat 值 会 怎样 呢 ? 


.quotebox { 
background-repeat: no-repeat, repeat-y; 
background-image: url(bg01.png), url(bg02.png), url(bg03.png), url(bg04.png); 
background-position: top left, top right, bottom right, bottom left; 


background-color: #FFF; } 
EAEE P. BAME = SARA BCE, TES T AER D2 A VPA o 
如 采 是 3 个 平 铺 值 的 话 ， 它 们 会 分 别 被 应 用 到 第 一 、 第 二 和 第 三 个 图 像 上 ， 而 第 四 个 图 像 会 取 第 
一 个 平 铺 值 。 
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7.10 ”二 维 变换 


如 采 你 曾 想 过 旋转 或 倾 笠 一 个 元 系 、 边 框 、 文 本 或 其 他 任何 东西 ， 那 么 这 一 和 绝对 适合 你 。 

然而 ,首先 要 提醒 一 句 : N TARAR, KEH transform (变换 ) 属性 的 无 前 级 版 
本 。 截 至 撰写 本 文 之 时 ， 在 浏览 带 中 实现 变换 实际 上 需要 多 个 囊 前 级 的 声明 ， 就 像 这 样 : 

-webkit-transform: ..; 

-moz-transform: ..; 

-o-transform: ..; 


-ms-transform: ..; 
transform: .'.5; 


在 一 两 年 之 内 应 该 就 不 需要 了 (希望 如 此 ! ), iE EISE, “Sd Be ASIN RIN AIA, XX 
里 只 是 为 了 清晰 起 见 而 使 用 的 无 前 缀 简化 版 本 。 

到 了 变换 的 时 候 啦 ! 可 能 最 简单 最 容 多 理解 的 变换 就 是 旋转 了 ， 如 图 7-31 所 示 。( 在 下 一 个 
及 后 面 的 图 中 ， 虚 线 〈 实 为 红色 ) 代表 被 变换 的 元 系 在 变换 之 前 的 放置 位 置 。) 


.boxl {-moz-transform: rotate(33.3deg);] 
.box2 {-moz-transform: rotate(-90deg);] 


Mozilla Firefox 


图 7-31 ERA TUZRHE, REAR AN Y UAR LE OE Re C BU HS JR RC EL DILE 
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在 某 种 意义 上 ， 变 换 跟 相对 定位 很 像 : 元 素 被 正常 放置 “， 然 后 进行 变换 。 你 可 以 变换 任何 
元 素 ， 在 使 用 旋转 时 可 以 应 用 任何 实数 的 度数 (degree ) WME (radian ) 或 者 百 分 度 (grad) 来 
指定 旋转 角度 。 如 果 你 曾 想 过 把 博客 旋转 e 弧 度 或 者 225 百 分 度 ”"， 那 么 好 了 吧 ， 你 的 机 会 来 了 。 

蛙 无 疑问 你 肯定 注意 到 了 ,前 面 例子 中 的 元 系 框 是 围绕 它们 的 中 心 旋转 的 。 这 是 因为 默认 的 
变换 原点 是 50% 50%, 或 者 说 是 元 系 的 中 心 。 你 可 以 通过 transform-origin 改 变 原 点 ( 如 图 7-32 
BRAN )。 


.boxl (transform: rotate(33.3deg); transform-origin: bottom left;j 
.box2 (transform: rotate(-90deg); transform-origin: 75$ 0;} 


eoo Mozilla Firefox t3 


图 7-32 ”元 素 围 绕 非 中 心 的 某 个 点 旋转 
两 点 需要 注意 。 第 一 点 , 负 的 角度 可 以 用 等 价 的 正 角 度 实现 。 因 此 ，270 deg” 4-90 deg 在 元 


素 的 最 终 位 置 上 是 等 价 的 ， 就 像 0 deg 和 360 deg 是 等 价 的 一 样 。 第 二 点 ， 你 可 以 指定 比 表面 看 上 去 
的 最 大 值 更 大 的 角度 。 如 果 你 声明 540 deg， 则 元 素 旋转 后 的 最 终 位 置 和 声明 180 deg 的 效果 是 完全 
相同 的 (也 和 -180 deg、900 deg 等 相同 )。 如 有 果 你 同时 应 用 了 变换 COL Ra) 的 话 ， ABA Play AY 
结果 可 能 会 不 同 ， 不 过 最 终 “ 静 止 ” 的 状态 是 等 价 的 。 


(OD 这 里 指 元 素 位 于 正常 的 文档 流 中 ， 相 当 于 position:static。 
© 1 弧度 约 为 57.3 度 ，e 约 等 于 2.718 28，1 个 百 分 度 为 直角 的 1%， 即 0.9 度 。 
(3) 即 270 degreee 和 270 度 ， 下 同 。 
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跟 旋转 一 样 简单 的 还 有 缩放 (scale )， 图 7-33 中 展示 了 一 个 例子 。 正 如 你 所 期 竺 的 ， 它 可 以 
缩放 元 素 的 尺寸 , 使 元 素 变 小 或 者 变 大 。 你 可 以 沿 着 两 个 坐标 轴 , 或 者 以 某 个 角度 沿 着 每 个 坐标 
轴 进 行 缩放 。 

.box1 (transform: scale(0.5);} 

.Dox2 (transform: scale(0.75, 1.5);} 


,e00 Mozilla Firefox E 


图 7-33 ”缩放 后 的 元 素 


一 个 scale () 值 意味 关 元 丢 会 同时 治 肴 8 币 和 7 秆 缩放 那些 倍数 。 如 打 有 两 个 值 ,， 则 第 一 个 代 
KIKE (X) 缩放 ， 第 二 个 代表 竺 直 CY) 缩放。 因此， 如 果 你 想 保 持 水 平方 回 不 变 ， 而 只 在 7 钊 
进行 缩放 ， 那 就 这 样 做 : 


.box1 (transform: scale(0.5);} 


.box2 {transtorm: scale(1, 1.5);} 
另外 ， 也 可 以 使 用 scaley () 值 : 


.boxl (transform: scale(0.5);} 
.box2 {transform: scaleY(l.5):;] 


无 论 你 选择 了 哪 种 特定 的 方式 ， 图 7-34 部 将 是 最 终结 来 。 
对 于 scalex() 的 值 也 是 一 样 , 它 会 导致 垂直 方 回 不 变 , 而 只 缩放 水 平方 加 (如 几 7-35 所 示 )。 


.box1 (transform: scalexX ( 


TA 
) ;} 


0 . 5 
.Dox2 {transform: scalex(1.5 
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eoo Mozilla Firefox 


图 7-34 Wi HEUHBJ GER, Hobo i YB 


eoo Mozilla Firefox = 


图 7-35 ”两 个 沿 X 轴 缩放 后 的 元 条 


220 第 7 章 可 预见 的 未 来 


目 己 写 CSS 的 时 候 ， 在 任何 需要 纯 生 直方 回 缩 放 的 情况 下 ， 只 使 用 scale () 并 十 入 一 个 0 的 
方式 看 起 来 是 最 方便 的 。 如 果 通 过 DOM 脚 本 编程 来 改变 元 素 的 缩放 ， 那么 直接 操作 scalex() 和 
scaleY() 可 能 更 容易 些 。 

像 旋转 一 样 ， 你 也 可 以 影响 缩放 的 原点 。 例 如 ， 可 以 使 一 个 元 素 沿 着 其 左上 角 进 行 缩放 ， 而 
不 是 沿 看 中 心 收缩 ( 如 图 7-36 所 示 )。 


.boxl (transform: scale(0.5); transform-origin: top left;) 
.box2 (transform: scale(1.5); transform-origin: 100% 100%;} 


Mozilla Firefox = 


图 7-36 ”两 个 拥有 不 同 缩放 原点 的 元 素 〈 已 缩放 ) 


同样 简单 的 还 有 平移 。 在 这 种 情况 下 , 它 不 止 是 换 了 种 说 法 , 而 是 将 一 个 形状 从 一 点 “平移 
到 为 外 一 点 ， 如 图 7-37 所 示 。 它 是 包含 了 一 个 或 两 个 长 度 值 的 仿 移 量 。 


.boxl (transform: translate(50px);] 


.box2 (transform: translate(5em,10em);) 

H— KA, VADER EHE Ro HOUR BOERS, FAR REP PE 

当 translate() 值 中 只 有 -一 个 长 度 值 时 , 它 指定 水 平 的 移动 量 ,而 垂直 的 移动 量 则 假定 为 零 。 
如 果 你 只 想 让 元 素 向 上 或 者 向 下 平移 , 那么 有 两 个 选择 。 第 一 个 ,简单 地 为 水 平方 向 指定 一 个 为 
0 的 长 度 值 。 


.boxl {transform: translate(0,50px);} 


.box2 (transform: translate(5em,10em) ; } 


eoo Mozilla Firefox = 


图 7-37 “平移 后 的 元 素 
男 外 一 个 是 使 用 translateY () 的 值 模式 : 


.boxl {transform: translateY (50px) + } 


.box2 (transform: translate(5em,10em);} 
任何 一 种 方法 都 会 得 到 如 图 7-38 所 示 的 结果 。 

这 里 同样 存在 translatex()， 它 也 会 像 你 预期 的 那样 工作 : 水 平移 动 元 系 。 

你 可 以 在 刚刚 平移 的 地 方 再 声明 一 个 transform-origin， 当 然 是 否 这 么 做 并 不 是 很 重要 ， 
毕 竞 ， 到 底 是 元 素 的 中 心 还 是 左上 和 角 被 癌 右 推 过 50 px 都 无 所 谓 ， 无 论 哪 种 方式 元 素 的 最 终 位 置 
都 是 一 样 的 ， 不 过 这 只 在 你 使 用 的 全 部 都 是 平移 操作 的 情况 下 才 成 立 。 如 有 果 同 时 进行 其 他 操作 ， 
比如 旋转 或 缩放 ， 那 么 原点 就 很 重要 了 。( 稍 后 详 述 组 合 变换 。) 

最 后 一 种 变换 是 扭曲 (skew )， 它 稍微 复杂 一 些 ， 然 而 声明 方法 并 不 比 你 目前 见 过 的 难 。 扭 
曲 一 个 元 素 将 使 其 沿 一 个 轴 或 两 个 轴 变 形 ， 如 图 7-39 所 示 。 


.boxl {transform: skew(23deg);} 


.box2 {transform: skew(l3deg,-45deg);} 

如 果 只 为 skew() 提 供 一 个 值 ， 那 么 就 只 有 水 平 CX) 扭曲 ， 没 有 垂直 (7) 扭曲 。 像 平移 和 
缩放 一 样 ， 也 存在 skewX() 和 skewY () 值 ， 可 以 用 在 希望 明确 地 沿 着 一 个 坐标 轴 进 行 扣 曲 的 时 候 
( 如 图 7-40 所 示 )。 


.boxl {transform: skewX(-23deg);} 
.box2 {transform: skewY (45deg);} 
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图 7-38 平移 后 的 两 个 不 同 元 素 
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图 7-39 ”两 个 扭曲 的 元 素 


eoo Moz 


illa Firefox 


图 7-40 ”两 个 沿 着 不 同 的 坐标 轴 扭 曲 的 元 素 


下 面 介绍 扭曲 的 工作 原理 。 假 设 有 两 根木 杆 穿 过 元 素 ， 一 个 沿 着 7 镍 ,， 另 一 沿 着 7 竹 。 当 沿 着 
2 轴 方 向 扭曲 时 ，7 镍 会 旋转 过 指定 的 扭曲 角度 。 是 的 , TEskewx () 操 作 中 旋转 的 是 7 轴 ( 垂直 的 )。 
正 的 角度 是 逆 时 针 的 ， 而 负 角 度 是 顺 时 针 的 。 这 就 是 前 面 例子 中 的 第 一 个 框 会 向 右倾 斜 的 缘故 : 
7 轴 被 顺 时 针 倾斜 了 33.3 度 。 

这 个 基本 情况 也 会 发 生 在 skewY () 上: 2 镍 会 被 倾斜 特定 的 角度 ， 正 角度 时 会 逆 时 针 倾斜 ， 
而 负 角 度 时 会 顺 时 针 倾斜。 

这 里 最 有 趣 的 部 分 就 是 原点 的 放置 方式 。 如 果 原 点 是 在 中 心 ， 而 你 为 skewX () 指 定 了 一 个 负 
值 的 话 ， 那 么 元 素 的 顶部 就 会 滑 向 原点 的 右 侧 ， 而 底部 会 滑 向 原点 的 左 侧 。 然 而 ， 如 果 把 原点 改 
到 元 素 的 底部 ， 那 么 整个 元 素 会 从 底部 开始 完全 向 右倾 斜 。 人 参见 图 7-41。 


.boxl {transform: skewX(-23deg);] 
.box2 (transform: skewX(-23deg); 


垂直 扭曲 也 会 产生 类 似 的 效 朱 。 
那么 这 些 就 是 你 能 实现 的 所 有 变换 类 型 了 。 但 是 如 果 你 想 同时 使 用 不 止 一 个 的 话 , 该 怎么 做 
呢 (如 图 7-42 所 示 ) ? 没 问题 ! 只 需 按 照 你 想 让 它们 发 生 的 顺序 把 它们 列 出 来 。 


.boxl {transform: translateX(50px) rotate(23deg);} 
.box2 {transform: scale(0.75) translate(25px,-2em);] 


transform-origin: bottom center; } 
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图 7-41 两 个 具有 不 同 原 点 的 元 素 〈 已 扭曲 ) 
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图 7-42 ”同时 应 用 多 个 变换 
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在 任何 情况 下 ,都 是 从 第 一 个 开始 ， 每 次 执行 一 个 变换 。 这 可 以 造成 非 第 显 闭 的 差 寞 ,考虑 
相同 的 变换 以 不 同 的 顺序 组 合 所 呈现 的 效果 ( 如 图 7-43 所 示 )。 


.boxl {transform: rotate(45deg) skew(-45deg);)j 
.box2 {transform: skew(-45deg) rotate(45deg) ;} 


eoo Mozilla Firefox c 


图 7-43 ”由 变换 值 的 顺序 不 同 引发 的 不 同 效 果 


这 里 还 有 一 个 需要 介绍 的 变换 值 类 型 matrix(), 这 个 值 类 型 允许 你 指定 一 个 包含 6 部 分 的 变 
换 和 矩阵 ， 最 后 两 部 分 定义 了 平移 。 下 面 是 一 个 代码 示例 ， 结 采 如 图 7-44 所 示 。 


.boxl {transform: matrix(0.67,0.23,0,1,25px,10px);} 
.box2 {transform: matrix(1,0.13,0.42,1,0,-25px);} 


基本 上 ， 前 4 个 数 子 是 简写 形式 ,代表 了 旋转 、 扭 曲 以 及 乡 放 一 个 元 系 的 最 终结 灯 ， 而 最 
后 两 个 数字 会 平移 最 终结 果 。 如 末 理 解数 竺 中 的 矩 阵 变 换 ， 那 么 你 会 “ 爱 ” 上 这 种 方式 的 。 如 
条 不 理解 ， 也 不 要 太 过 担心 。 回 顾 一 下 本 节 介 绍 的 其 他 变换 类 型 ， 通 过 它们 也 可 以 达到 同样 的 
BAR o 

如 条 你 想 了 解 一 些 关 于 矩阵 变换 的 知识 ， 这 里 有 两 个 参考 资源 : 


Q http://en.wikipedia.org/wiki/Linear_transformation#Examples of linear transformation matrices 
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Q http://www.mathamazement.com/Lessons/Pre-Calculus/08 Matrices-and-Determinants/coordin 


ate-transformation-matrices.html 
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Smashing CSS Professional Techniques for Modern Layout 


色彩 绝伦 的 CSS 


本 书 远 非 只 是 介绍 基础 知识 ， 它 不 仅 全 面 细致 地 讲解 布局 与 效果 ， 而 且 展 望 了 HTML5 和 CSS3 的 未 来 。 业 内 很 少 有 人 能 像 Eric 
A. Meyer 一 样 详细 阐明 CSS， 他 在 本 书 中 深入 分 析 了 普遍 适用 的 实用 技术 ， 讲 解 了 如 何 选 用 正确 的 工具 、 如 何 通过 jQuery 使 用 CSS 
效果 和 CSS3 技 术 。 

本 书 主要 内 容 包括 : 

令 显示 或 隐藏 元 素 

© 通过 XHTML 为 body 或 html 元 素 设置 背景 

€ 超过 15 种 布局 技巧 ， 包 括 清除 浮动 、 两 栏 /三 栏 布局 、 伪 造 栏 布局 、“ 了 唯一 布局 ”、Holy Grail、 基 于 em 的 布局 、 流 式 网 

格 、 固 定 页 脚 等 

9 各 种 CSS 效 果 ， 包 括 CSS 弹 出 框 、 框 冲 切 、 圆 角 、CSS 精 灵 、 滑 动 门 、 流 式 漂白 、 参 差 浮动 等 

令 应 用 CSS 表 样式 ， 包 括 使 用 表 头 、 主 体 、 脚 注 、 行 标题 、 面 向 列 的 样式 、 表 的 映射 和 图 形 化 等 

9 使 用 CSS3 元 素 、 多 背景 支持 、RGBA， 以 及 通过 jQuery 执行 CSS3 选 取 操 作 等 

本 书 适合 具有 一 定 的 CSS 和 JavaScript 使 用 经 验 的 Web 开 发 人 员 学 习 参 考 。 


Eric A. Meyer 国际 公认 的 HTML、CSS、Web 标 准 方面 的 专家 ， 自 1993 年 开始 从 事 与 Web 设 计 与 开发 相关 的 工作 。 著 有 《Eric 
Meyer 谈 CSS ( #1) ) 》 和 《Eric Meyer 谈 CSS (#2) 》。 
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